Webpack2使用CommonsChunkPlugin

Question

考虑到这个

[01] [00] WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance.
[01] [00] Entrypoints:
[01] [00]   app (5.43 MB)
[01] [00]       vendor1.bundle.js
[01] [00]       vendor1.bundle.js.map
[01] [00]       app.bundle.js
[01] [00]       styles.css
[01] [00]       app.bundle.js.map
[01] [00]       styles.css.map
[01] [00] 
[01] [00]   vendor2 (2.37 MB)
[01] [00]       vendor1.bundle.js
[01] [00]       vendor1.bundle.js.map
[01] [00]       vendor2.bundle.js
[01] [00]       vendor2.bundle.js.map
[01] [00] 
[01] [00]   vendor1 (901 kB)
[01] [00]       vendor1.bundle.js
[01] [00]       vendor1.bundle.js.map

和这个webpack配置

   let plugins = () => {
    let basePLUGINS = [
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor1','vendor2'],
            minChunks: Infinity
        }),
        new HtmlWebpackPlugin({
            chunks: ['app'],
            body: true,
            chunksSortMode: 'dependency',
            env: {
                Prod: args.options.prod
            },
            template: 'src/index.ejs'
        }),
        new webpack.LoaderOptionsPlugin({
            options: {
                sassLoader: {
                    includePaths: [path.resolve(__dirname, "./src/sass")]
                },
                context: '/',
                postcss: [
                    require("postcss-cssnext")(
                        {
                            browsers: '> 0%',
                            customProperties: true,
                            colorFunction: true,
                            customSelectors: true,
                        })
                ]
            }
        }),


    ];
    if (args.options.prod) {
        basePLUGINS.push(
            new ExtractTextPlugin({
                filename: "styles.css",
                disable: false,
                allChunks: true,
                sourceMapFilename: '[file].map'
            }),
            new webpack.optimize.UglifyJsPlugin({
                compress: {warnings: false},
                output: {comments: false},
                sourceMap: true
            })
        );
        return basePLUGINS
    }
    return basePLUGINS

};

module.exports = {
    entry: {
        app: "./src/ts/app.tsx",
        vendor2: ['react-dom'],
        vendor1: ['react']
    },
    plugins: plugins(),
    output: {
        filename: "[name].bundle.js",
        path: path.join(__dirname, "www")
    },

我显然在这里打包反应3次？ CommonsChunkPlugin需要帮助 如何才能使vendor2和我的应用程序不包含反应而不更改我的代码库？ 运行webpack2.beta28

Answer 1

以下是vendor.js文件，其中包含app和libs块的所有内容。

new webpack.optimize.CommonsChunkPlugin(
            {
                name: 'vendor',
                chunks: ['app', 'libs'],
                filename: 'vendor.js'
            })

所以考虑问题切入点：

entry: {
        app: "./src/ts/app.tsx",
        vendor2: ['react-dom'],
        vendor1: ['react']
    }

我必须

new webpack.optimize.CommonsChunkPlugin({
    name: 'react+webpack-internals',
    chunks: ['app', 'vendor1'],
    filename: 'react.js'
}),
new webpack.optimize.CommonsChunkPlugin({
    name: 'react-dom',
    chunks: ['app', 'vendor2'],
    filename: 'react-dom.js'
})

Answer 2

看起来一切正常 - 对于类似的配置：

var path = require("path");
var webpack = require("webpack");
var HtmlWebpackPlugin = require('html-webpack-plugin');

let plugins = () => {
    let basePLUGINS = [
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor1','vendor2'],
            minChunks: Infinity
        })
    ];
    return basePLUGINS

};

module.exports = {
    devtool: 'source-map',
    cache: true,
    entry: {
        vendor1:['react'],
        vendor2:['react-dom'],
        app:'./app/main'
    },
    output: {
        filename: "dist/[name].js"
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/, 
            loader: "babel",
            query: {
                presets: [  "es2015", 'react']
            }
        }]
    },
    plugins : plugins()
}

我明白了：

Hash: 34e2caf91850d7be3386
Version: webpack 2.1.0-beta.25
Time: 4059ms
              Asset       Size  Chunks             Chunk Names
        dist/app.js    16.7 kB       0  [emitted]  app
    dist/vendor1.js  334 bytes       1  [emitted]  vendor1
    dist/vendor2.js     728 kB       2  [emitted]  vendor2
    dist/app.js.map    9.78 kB       0  [emitted]  app
dist/vendor1.js.map  327 bytes       1  [emitted]  vendor1
dist/vendor2.js.map     867 kB       2  [emitted]  vendor2
 [183] multi vendor1 28 bytes {1} [built]
 [184] multi vendor2 28 bytes {2} [built]
    + 183 hidden modules

评论插件：

Hash: 2b59b62aea13547150d2
Version: webpack 2.1.0-beta.25
Time: 4217ms
              Asset    Size  Chunks             Chunk Names
        dist/app.js  741 kB       0  [emitted]  app
    dist/vendor2.js  725 kB       1  [emitted]  vendor2
    dist/vendor1.js  138 kB       2  [emitted]  vendor1
    dist/app.js.map  874 kB       0  [emitted]  app
dist/vendor2.js.map  865 kB       1  [emitted]  vendor2
dist/vendor1.js.map  164 kB       2  [emitted]  vendor1
 [183] multi vendor1 28 bytes {2} [built]
 [184] multi vendor2 28 bytes {1} [built]
    + 183 hidden modules