Webpack 4 splitchunks，如何强制公共块？

Question

我正在尝试将项目拆分为公共块，使用旧的 commonChunks 插件很容易，因为该项目旨在拆分为各种库... 使用新的 splitChunks 我无法获得相同的结果。所以我回到了一个基本测试，试图理解新的 splitChunks，不幸的是我面临着同样的问题。这里的配置文件：

const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

var PROD = JSON.parse(process.env.PROD_ENV || '0');

const groupsOptions = {chunks: "all", minSize:0, minChunks: 1, reuseExistingChunk: true, enforce: true};

const reactConfig = {
    entry: {
        "react": ["react", "react-dom"],
        "pageA": "./src/A.jsx",
        "pageB": "./src/B.jsx",
        "pageC": "./src/C.jsx",
        "pageD": "./src/D.jsx",
        "commonAB": [ "./src/ab_a.js", "./src/ab_b.js"],
        "commonCD": ["./src/cd_c.js", "./src/cd_d.js"]
    },
    output: {
        path: __dirname + '/build/',
        filename: PROD
            ? "[name].min.js"
            : "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["es2015", "react"]
                    }
                }
            }
        ]
    },
    optimization: {
        splitChunks: {
            cacheGroups:{
                react: {test:'react', name: "react", ...groupsOptions},
                AB: {test:'commonAB', name: "commonAB", ...groupsOptions},
                CD: {test:'commonCD', name: "commonCD", ...groupsOptions}
            }
        }
    },
    plugins: [
        // new webpack.optimize.CommonsChunkPlugin({
        //     name: "react",
        //     filename: "react.js",
        //     chunks: ["pageA", "pageB"]
        // }),
        // new webpack.optimize.CommonsChunkPlugin({
        //     name: "commonAB",
        //     chunks: ["pageA", "pageB"]
        // })
        //new webpack.optimize.UglifyJsPlugin()
    ]
};

有了那个配置我可以实现这个输出，这正是我想要做的:

      Asset      Size    Chunks             Chunk Names
commonAB.js  1.67 KiB  commonAB  [emitted]  commonAB
commonCD.js  1.67 KiB  commonCD  [emitted]  commonCD
   pageA.js   8.1 KiB     pageA  [emitted]  pageA
   pageB.js  8.15 KiB     pageB  [emitted]  pageB
   pageC.js   8.1 KiB     pageC  [emitted]  pageC
   pageD.js   8.1 KiB     pageD  [emitted]  pageD
   react.js   631 KiB     react  [emitted]  react
Entrypoint pageA = react.js commonAB.js pageA.js
Entrypoint pageB = react.js commonAB.js pageB.js
Entrypoint pageC = react.js commonCD.js pageC.js
Entrypoint pageD = react.js commonCD.js pageD.js
[./src/A.jsx] 2.51 KiB {pageA} [built]
[./src/B.jsx] 2.56 KiB {pageB} [built]
[./src/C.jsx] 2.51 KiB {pageC} [built]
[./src/D.jsx] 2.51 KiB {pageD} [built]
[./src/ab_a.js] 122 bytes {commonAB} [built]
[./src/ab_b.js] 122 bytes {commonAB} [built]
[./src/cd_c.js] 122 bytes {commonCD} [built]
[./src/cd_d.js] 122 bytes {commonCD} [built]
   [0] multi react react-dom 40 bytes {react} [built]
   [1] multi ./src/ab_a.js ./src/ab_b.js 40 bytes {commonAB} [built]
   [2] multi ./src/cd_c.js ./src/cd_d.js 40 bytes {commonCD} [built]
    + 23 hidden modules

这个例子很简单，一切OK！

pageA 依赖于 react 和 commonAB -> OK
pageB 依赖于 react 和 commonAB -> OK
pageC 依赖于 react 和 commonCD -> OK
pageD 依赖于 react 和 commonCD -> OK

但是，当我修改 ab_a.js 的代码并添加

import React from 'react';

输出是：

> webpack --config src.config.js --colors --progress --watch --mode development

 10% building modules 3/3 modules 0 active
Webpack is watching the files…
                                                                                                                                                                                                      Hash: 020e818e618248278134
Version: webpack 4.2.0
Time: 1900ms
Built at: 2018-3-22 11:03:21
      Asset      Size    Chunks             Chunk Names
commonAB.js  1.94 KiB  commonAB  [emitted]  commonAB
commonCD.js  1.67 KiB  commonCD  [emitted]  commonCD
   pageA.js   8.1 KiB     pageA  [emitted]  pageA
   pageB.js  8.15 KiB     pageB  [emitted]  pageB
   pageC.js  8.11 KiB     pageC  [emitted]  pageC
   pageD.js  8.11 KiB     pageD  [emitted]  pageD
   react.js   631 KiB     react  [emitted]  react
Entrypoint pageA = commonAB.js react.js pageA.js
Entrypoint pageB = commonAB.js react.js pageB.js
Entrypoint pageC = commonAB.js react.js commonCD.js pageC.js
Entrypoint pageD = commonAB.js react.js commonCD.js pageD.js
[./src/A.jsx] 2.51 KiB {pageA} [built]
[./src/B.jsx] 2.56 KiB {pageB} [built]
[./src/C.jsx] 2.51 KiB {pageC} [built]
[./src/D.jsx] 2.51 KiB {pageD} [built]
[./src/ab_a.js] 152 bytes {commonAB} [built]
[./src/ab_b.js] 122 bytes {commonAB} [built]
[./src/cd_c.js] 122 bytes {commonCD} [built]
[./src/cd_d.js] 122 bytes {commonCD} [built]
   [0] multi react react-dom 40 bytes {react} [built]
   [1] multi ./src/ab_a.js ./src/ab_b.js 40 bytes {commonAB} [built]
   [2] multi ./src/cd_c.js ./src/cd_d.js 40 bytes {commonCD} [built]
    + 23 hidden modules

如您所见，pageC 和 pageD 取决于 commonAB.js，但事实并非如此！这个例子很简单，一切OK！

pageA 依赖于 react 和 commonAB -> OK
pageB 依赖于 react 和 commonAB -> OK
pageC 依赖于 react 和 commonAB AND commonCD -> 错误
pageD 依赖于 react 和 commonAB AND commonCD -> 错误

此外，如果我将 React 从 'react'; 导入 cs_c.js（预期，但不是我想要的）我有输出：

      Asset      Size    Chunks             Chunk Names
commonAB.js  1.94 KiB  commonAB  [emitted]  commonAB
commonCD.js  1.94 KiB  commonCD  [emitted]  commonCD
   pageA.js  8.11 KiB     pageA  [emitted]  pageA
   pageB.js  8.16 KiB     pageB  [emitted]  pageB
   pageC.js  8.11 KiB     pageC  [emitted]  pageC
   pageD.js  8.11 KiB     pageD  [emitted]  pageD
   react.js   631 KiB     react  [emitted]  react
Entrypoint pageA = commonCD.js commonAB.js react.js pageA.js
Entrypoint pageB = commonCD.js commonAB.js react.js pageB.js
Entrypoint pageC = commonCD.js commonAB.js react.js pageC.js
Entrypoint pageD = commonCD.js commonAB.js react.js pageD.js
[./src/A.jsx] 2.51 KiB {pageA} [built]
[./src/B.jsx] 2.56 KiB {pageB} [built]
[./src/C.jsx] 2.51 KiB {pageC} [built]
[./src/D.jsx] 2.51 KiB {pageD} [built]
[./src/ab_a.js] 152 bytes {commonAB} [built]
[./src/ab_b.js] 122 bytes {commonAB} [built]
[./src/cd_c.js] 152 bytes {commonCD} [built]
[./src/cd_d.js] 122 bytes {commonCD} [built]
   [0] multi react react-dom 40 bytes {react} [built]
   [1] multi ./src/ab_a.js ./src/ab_b.js 40 bytes {commonAB} [built]
   [2] multi ./src/cd_c.js ./src/cd_d.js 40 bytes {commonCD} [built]
    + 23 hidden modules

pageA 依赖于 react 和 commonAB AND commonCD -> 错误
pageB 依赖于 react 和 commonAB AND commonCD -> 错误
pageC 依赖于 react 和 commonAB AND commonCD -> 错误
pageD 依赖于 react 和 commonAB AND commonCD -> 错误

感谢您的帮助！

Answer 1

经过更多关于 github 的讨论和更多的研究......这个配置非常有效：

const webpack = require('webpack');
const path = require('path');
const ManifestPlugin = require('webpack-manifest-plugin');

var PROD = JSON.parse(process.env.PROD_ENV || '0');

const groupsOptions = {chunks: "all", minSize:0, minChunks: 1, reuseExistingChunk: true, enforce: true};

const reactConfig = {
    entry: {
        "pageA": "./src/A.jsx",
        "pageB": "./src/B.jsx",
        "pageC": "./src/C.jsx",
        "pageD": "./src/D.jsx"
    },
    output: {
        path: __dirname + '/build/',
        filename: PROD
            ? "[name].min.js"
            : "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["es2015", "react"]
                    }
                }
            }
        ]
    },
    optimization: {
    namedModules: true,
    runtimeChunk: true, // <-- to avoid all hashes of generated file change every time a piece of code change in 1 file ... (and spare 4kb)
        splitChunks: {
            chunks: 'all',
            name : false,
            cacheGroups:{
                react: {test:/react/, name: "react", ...groupsOptions},
                AB: {test:/ab_a.js/, name: "commonAB", ...groupsOptions},
                AB: {test:/ab_b.js/, name: "commonAB", ...groupsOptions},
                CD: {test:/cd_c.js/ , name: "commonAB", ...groupsOptions},
                CD: {test:/cd_d.js/, name: "commonCD", ...groupsOptions}
            }
        }
    },
    plugins: [
        new ManifestPlugin({})
    ]
};

生成所需的输出：

> npm run build

> testcommon@1.0.0 build D:\dev\testCommon
> webpack --config src.config.js --colors --progress --watch --mode development

  0% compiling
Webpack is watching the files…
                                                                                                                                                                                                                                  Hash: 3ab0d2c347627bd736f0
Version: webpack 4.4.1
Time: 1917ms
Built at: 2018-4-3 10:26:02
        Asset       Size    Chunks             Chunk Names
  commonAB.js  657 bytes  commonAB  [emitted]  commonAB
  commonCD.js  987 bytes  commonCD  [emitted]  commonCD
     pageA.js   34.7 KiB     pageA  [emitted]  pageA
     pageB.js   34.7 KiB     pageB  [emitted]  pageB
     pageC.js   34.4 KiB     pageC  [emitted]  pageC
     pageD.js   34.4 KiB     pageD  [emitted]  pageD
     react.js    655 KiB     react  [emitted]  react
manifest.json  196 bytes            [emitted]
Entrypoint pageA = react.js commonAB.js pageA.js
Entrypoint pageB = react.js commonAB.js pageB.js
Entrypoint pageC = react.js commonCD.js pageC.js
Entrypoint pageD = react.js commonCD.js pageD.js
[./src/A.jsx] 2.49 KiB {pageA} [built]
[./src/B.jsx] 2.49 KiB {pageB} [built]
[./src/C.jsx] 2.49 KiB {pageC} [built]
[./src/D.jsx] 2.49 KiB {pageD} [built]
[./src/ab_a.js] 191 bytes {pageB} {pageA} [built]
[./src/ab_b.js] 116 bytes {commonAB} [built]
[./src/cd_c.js] 148 bytes {pageD} {pageC} [built]
[./src/cd_d.js] 191 bytes {commonCD} [built]

比以前的 Commons Chunks 插件更简单...

Thanks to ooflorent and sokra from the webpack project on github.

Webpack 4 splitchunks，如何强制公共块？

Webpack 4 splitchunks, how to force common chunks?

javascript

reactjs

webpack

commonschunkplugin

webpack-splitchunks