Question

因为我的React App正在使用webpack。我从Webpack 1.13.2版本的教程中学到了

以下webpack.config.js

const webpack = require('webpack');

    module.exports = {
      entry: {
        app: './client/Client.jsx',
        vendor: [
          'react', 'react-dom', 'react-router', 'react-bootstrap', 'react-router-bootstrap',
          'isomorphic-fetch', 'babel-polyfill', 'react-select',
        ],
      },
      output: {
        path: './static',
        filename: 'app.bundle.js',
      },
      plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
      ],
      module: {
        loaders: [
          {
            test: /\.jsx$/,
            loader: 'babel-loader',
            query: {
              presets: ['react', 'es2015'],
            },
          },
        ],
      },
      devServer: {
        port: 8000,
        contentBase: 'static',
        proxy: {
          '**': {
            target: 'http://localhost:3000',
          },
        },
        historyApiFallback: true,
      },
      devtool: 'source-map',
    };

从配置文件中生成输出（纱线运行编译），如下所示：

    yarn run v1.9.4
    $ webpack
    Hash: c9607842bef19b55cdcd
    Version: webpack 1.15.0
    Time: 5051ms
                   Asset     Size  Chunks             Chunk Names
           app.bundle.js  86.4 kB       0  [emitted]  app
        vendor.bundle.js  1.95 MB       1  [emitted]  vendor
       app.bundle.js.map  78.4 kB       0  [emitted]  app
    vendor.bundle.js.map  2.34 MB       1  [emitted]  vendor
       [0] multi vendor 112 bytes {1} [built]
        + 859 hidden modules
    Done in 5.40s.

所以我搜索并尝试了一些webpack 4 splitChunks选项和参数

    optimization: {
        runtimeChunk: true,
        splitChunks: {
          cacheGroups: {
            vendors: {
              chunks: 'initial',
              test: 'vendor',
              name: 'vendor',
              enforce: true,
            }
          }
        }
      },

但是我得到以下输出：

yarn run v1.9.4
$ webpack --config webpack.config.babel.js
Hash: 4a04bfab6be9854c92d3
Version: webpack 4.17.2
Time: 4670ms
Built at: 09/12/2018 6:12:39 PM
                                 Asset      Size       Chunks             Chunk Names
  f4769f9bdb7466be65088239c12046d1.eot  19.7 KiB               [emitted]  
  89889688147bd7575d6327160d64e760.svg   106 KiB               [emitted]  
  e18bbf611f2a2e43afc071aa2f4e1512.ttf  44.3 KiB               [emitted]  
 fa2772327f55d8198301fdb8bcfc8158.woff  22.9 KiB               [emitted]  
448c34a56d699c29117adc64c43affeb.woff2  17.6 KiB               [emitted]  
                         app.bundle.js   648 KiB          app  [emitted]  app
                             bundle.js  6.05 KiB  runtime~app  [emitted]  runtime~app
                      vendor.bundle.js  2.22 MiB       vendor  [emitted]  vendor
[./src/App.css] 1.04 KiB {app} [built]
[./src/App.js] 5.07 KiB {app} [built]
[./src/constants.js] 188 bytes {app} [built]
[./src/modules/validate.js] 134 bytes {app} [built]
[./src/pages/Books/BookDetail.js] 10.2 KiB {app} [built]
[./src/pages/Books/BookEdit.js] 7.76 KiB {app} [built]
[./src/pages/Books/BookView.js] 4.71 KiB {app} [built]
[./src/pages/Books/Books.css] 1.07 KiB {app} [built]
[./src/pages/Books/Books.js] 16.4 KiB {app} [built]
[0] multi react react-dom react-router-dom react-bootstrap react-router-bootstrap whatwg-fetch @babel/polyfill 100 bytes {vendor} [built]
[./src/pages/Index.js] 237 bytes {app} [built]
[./src/pages/Login.js] 7.59 KiB {app} [built]
[./src/pages/Logout.js] 319 bytes {app} [built]
[./src/pages/NotFound.js] 3.08 KiB {app} [built]
[./src/pages/Signup.js] 7.69 KiB {app} [built]
    + 617 hidden modules
Done in 5.78s.

如何配置webpack配置文件以获取类似于webpack版本1教程的输出？

Answer 1

const webpack = require('webpack');

    module.exports = {
      entry: ['babel-polyfill', 'isomorphic-fetch', './client/Client.jsx'],
      output: {
        path: './static',
        filename: 'app.bundle.js',
      },
      module: {
        rules: [
          {
            test: /\.jsx$/,
            loader: 'babel-loader',
            query: {
              presets: ['react', 'es2015'],
            },
          },
        ],
      },
      devtool: 'source-map',
      devServer: {
        port: 8000,
        contentBase: 'static',
        proxy: {
          '**': {
            target: 'http://localhost:3000',
          },
        },
        historyApiFallback: true,
      },
    };

您可以保留优化属性，如果您使用mode:"production"，则默认情况下将应用它们。

React / Webpack-从webpack 1迁移到4，“ webpack.optimize.CommonsChunkPlugin”

1 个答案: