相关文章推荐
小百科  ›  javascript - Webpack 4 splitchunks, how to force common chunks? - Stack Overflow
test react webpack
内向的口罩
1 年前
Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

I'm trying to split a project into commons chunks, it'was easy with the old commonChunks plugin because the project is designed to be splitted into kinds of libraries... With the new splitChunks i cannot achieve the same result. So i came back to a basic test to try to understand the new splitChunks, unfortunatley i'm facing sames problems. Here the configuration file : 

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()

With that config i can achieve this output, that is exactly what i want to do  :


      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

This exemple is very simple and everything is OK ! 


  • pageA depends from react and commonAB -> OK
    • 

  • pageB depends from react and commonAB -> OK
    • 

  • pageC depends from react and commonCD -> OK
    • 

  • pageD depends from react and commonCD -> OK
    • 

    But then, when i modify the code of ab_a.js and add 
    

    import React from 'react';

    the output is :
    

    > 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

    As you can see pageC and pageD depends of commonAB.js that is not the case !
This exemple is very simple and everything is OK ! 
    

  • pageA depends from react and commonAB -> OK
    • 

  • pageB depends from react and commonAB -> OK
    • 

  • pageC depends from react and commonAB AND commonCD -> Wrong
    • 

  • pageD depends from react and commonAB AND commonCD -> Wrong
    • 

    Furthermore if i had import React from 'react'; into cs_c.js (has expected, but not has i want) i have output :
    

          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 depends from react and commonAB AND commonCD -> Wrong 
    • 

  • pageB depends from react and commonAB AND commonCD -> Wrong 
    • 

  • pageC depends from react and commonAB AND commonCD -> Wrong 
    • 

  • pageD depends from react and commonAB AND commonCD -> Wrong
    • 

    Thank you for your help !
    
                If you think this is a Webpack4 bug, may I suggest you report it here -> github.com/webpack/webpack/issues
– Keith
                Mar 22, 2018 at 10:38
                Eventually i have submitted a report to github as you suggested ! Il will come back here to give the result of this request.
– Coolhand
                Mar 30, 2018 at 13:15

    After more talks on github, and more researches ... this configuration is working like a charm:
    

    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({})

    producing the desired output :
    

    > npm run build
> [email protected] 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]

    Which is simplier than previous Commons Chunks Plugin...
    
  
    Thanks to ooflorent and sokra from the webpack project on github.
    
        
    Thanks for contributing an answer to Stack Overflow!
    • Please be sure to answer the question. Provide details and share your research!
    But avoid …
    • Asking for help, clarification, or responding to other answers.
    • Making statements based on opinion; back them up with references or personal experience.
    To learn more, see our tips on writing great answers.
     
    推荐文章
    Link管理   ·   51好读   ·   Sov5搜索   ·   小百科
    小百科 - 百科知识指南