{"id":127598,"date":"2020-06-14T15:51:21","date_gmt":"2020-06-14T07:51:21","guid":{"rendered":"http:\/\/4563.org\/?p=127598"},"modified":"2020-06-14T15:51:21","modified_gmt":"2020-06-14T07:51:21","slug":"webpack4-typescript-%e5%a6%82%e4%bd%95%e4%bc%98%e5%8c%96%e7%bc%96%e8%af%91%e9%80%9f%e5%ba%a6","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=127598","title":{"rendered":"Webpack4 + TypeScript \u5982\u4f55\u4f18\u5316\u7f16\u8bd1\u901f\u5ea6?"},"content":{"rendered":"
\n
\n
\n

Webpack4 + TypeScript \u5982\u4f55\u4f18\u5316\u7f16\u8bd1\u901f\u5ea6? <\/h1>\n

<\/p>\n

\n
\u8cc7\u6df1\u5927\u4f6c : rabbbit <\/span> <\/i> 8<\/span> <\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n

\u901f\u5ea6\u6709\u70b9\u6162, \u6709\u4ec0\u4e48\u529e\u6cd5\u4f18\u5316\u7f16\u8bd1\u901f\u5ea6\u5417?<\/p>\n

\u5f53\u524d\u914d\u7f6e:<\/p>\n

webpack.config.js<\/p>\n

const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin');  const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); const smp = new SpeedMeasurePlugin(); const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');  module.exports = smp.wrap({   'entry': ['.\/src\/index.ts'],   'output': {     filename: 'main.js',     path: path.resolve(__dirname, 'dist'),   },   'mode': 'development',   'devtool': 'eval-source-map',   'devServer': {     port: '8000',     host: '0.0.0.0',     public: 'localhost:8000',     open: false,     quiet: true,   },   'plugins': [     new ForkTsCheckerWebpackPlugin(),     new webpack.ProgressPlugin(),      new HtmlWebpackPlugin({       template: '.\/src\/index.html',       inject: true,       open: false,     }),   ],   'module': {     rules: [       {         test: \/.(js|jsx|tsx|ts)$\/,         exclude: \/node_modules\/,         loader: 'babel-loader',       },       {         test: \/.(png|svg|jpg|gif)$\/,         use: ['file-loader'],       },     ],   },   'resolve': {     extensions: ['.tsx', '.ts', '.js'],   }, }); <\/code><\/pre>\n
.babelrc<\/p>\n
{   \"presets\": [     \"@babel\/preset-env\",     \"@babel\/preset-TypeScript\"   ],   \"plugins\": [     \"@babel\/proposal-class-properties\",     \"@babel\/proposal-object-rest-spread\"   ] } <\/code><\/pre>\n
tsconfig.json<\/p>\n
{   \"compilerOptions\": {     \"baseUrl\": \".\/\",     \"outDir\": \".\/dist\/\",     \"target\": \"ES2020\",     \"moduleResolution\": \"node\", \/\/ threejs need     \"module\": \"CommonJS\",     \"esModuleInterop\": true,     \"noImplicitAny\": true,     \"sourceMap\": true,     \"isolatedModules\": true,     \"strictBindCallApply\": true,   },   \"exclude\": [     \"node_modules\"   ],   \"include\": [     \"src\/**\/*.ts\",     \"types\/**\/*.d.ts\"   ] } `` <\/code><\/pre>\n<\/p><\/div>\n
 \u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (3<\/span>)        <\/div>\n
 <\/div>\n<\/p><\/div>\n<\/p><\/div>\n
    \n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : Jirajine <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u4f60\u53ef\u4ee5\u8bd5\u8bd5 esbuild: https:\/\/github.com\/evanw\/esbuild                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : alan0liang <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u81f3\u5c11\u4e0a\u4e2a cache-loader \u5427                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : BlackHole1 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u4e0d\u8003\u8651\u7ee7\u7eed\u4f7f\u7528 webpack \u7684\u8bdd\uff0c\u5c31\u7528 esbuild \u3002<\/p>\n
    \u5982\u679c\u60f3\u7ee7\u7eed\u4f7f\u7528 webpack\uff0c\u65b9\u6cd5:
    1. \u4f7f\u7528 thread-loader
    2. \u5347\u7ea7 webpack \u53ca\u5468\u8fb9\u6240\u6709\u7684 package
    3. \u5982\u679c\u4f7f\u7528\u5230\u4e86 nodejs addon \u8fd9\u4e9b\u4e1c\u897f\u7684(\u4f8b\u5982 node-sass)\u8bdd\uff0c\u5c31\u914d\u5408 ccache\uff0c\u52a0\u5feb\u6784\u5efa C++\u7684\u901f\u5ea6                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n","protected":false},"excerpt":{"rendered":"
    Webpack4 + TypeSc…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/127598"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=127598"}],"version-history":[{"count":0,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/127598\/revisions"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=127598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=127598"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=127598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}