捆绑生产时如何调试 webpack？

Question

我目前正在学习 webpack 并且有一个有效的开发配置，但是当我尝试将相同的配置用于生产时，除了 css 包之外的所有东西。

assets master % node_modules/webpack/bin/webpack.js --display-optimization-bailout --display-error-details --display verbose -p --config webpack.prod.config.js
Hash: 322ab19c46fd24da52d5
Version: webpack 4.42.0
Time: 2847ms
Built at: 03/18/2020 11:39:04 AM
                            Asset       Size  Chunks                    Chunk Names
                   ../favicon.ico   1.23 KiB          [emitted]
            ../images/phoenix.png   13.6 KiB          [emitted]
                    ../robots.txt  202 bytes          [emitted]
                    app.bundle.js   2.79 KiB       0  [emitted]         app
            vendors~app.bundle.js    1.1 MiB       1  [emitted]  [big]  vendors~app
vendors~app.bundle.js.LICENSE.txt  186 bytes          [emitted]
Entrypoint app [big] = vendors~app.bundle.js app.bundle.js
chunk    {0} app.bundle.js (app) 2.89 KiB ={1}= [entry] [rendered]
    > ./js/app.js app
 [1] ./js/app.js 698 bytes {0} [depth 0] [built]
     [no exports]
     ModuleConcatenation bailout: Module is an entry point
     single entry ./js/app.js  app
 [2] ../deps/phoenix_html/priv/static/phoenix_html.js 2.21 KiB {0} [depth 1] [built]
     [no exports used]
     ModuleConcatenation bailout: Module is not an ECMAScript module
     harmony side effect evaluation phoenix_html [1] ./js/app.js 11:0-22
chunk    {1} vendors~app.bundle.js (vendors~app) 1.17 MiB ={0}= [initial] [rendered] split chunk (cache group: vendors) (name: vendors~app)
    > ./js/app.js app
 [0] (webpack)/buildin/global.js 472 bytes {1} [depth 2] [built]
     ModuleConcatenation bailout: Module is not an ECMAScript module
     cjs require global [3] ./node_modules/@fortawesome/fontawesome-free/js/fontawesome.js 1:0-47
     cjs require global [4] ./node_modules/timers-browserify/main.js 1:0-41
     cjs require global [5] ./node_modules/setimmediate/setImmediate.js 1:0-41
     + 7 hidden modules

LOG from webpack.buildChunkGraph.visitModules
<t> prepare: 0.173795ms
<t> visiting: 0.072517ms

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  vendors~app.bundle.js (1.1 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (1.1 MiB)
      vendors~app.bundle.js
      app.bundle.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!css/app.css:
    Entrypoint mini-css-extract-plugin = *
    chunk    {0} * (mini-css-extract-plugin) 1.18 MiB [entry] [rendered]
        > !!/Users/joshchernoff/Dev/morphic.pro/assets/node_modules/css-loader/dist/cjs.js!/Users/joshchernoff/Dev/morphic.pro/assets/node_modules/postcss-loader/src/index.js!/Users/joshchernoff/Dev/morphic.pro/assets/css/app.css mini-css-extract-plugin
     [1] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./css/app.css 1.12 MiB {0} [depth 0] [built]
         ModuleConcatenation bailout: Module is not an ECMAScript module
         single entry !!/Users/joshchernoff/Dev/morphic.pro/assets/node_modules/css-loader/dist/cjs.js!/Users/joshchernoff/Dev/morphic.pro/assets/node_modules/postcss-loader/src/index.js!/Users/joshchernoff/Dev/morphic.pro/assets/css/app.css  mini-css-extract-plugin
         + 2 hidden modules

    LOG from webpack.buildChunkGraph.visitModules
    <t> prepare: 0.255461ms
    <t> visiting: 0.111564ms

我的假设是这就是问题所在。

[1] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./css/app.css 1.12 MiB {0} [depth 0] [built]
         ModuleConcatenation bailout: Module is not an ECMAScript module
         single entry !!/Users/joshchernoff/Dev/morphic.pro/assets/node_modules/css-loader/dist/cjs.js!/Users/joshchernoff/Dev/morphic.pro/assets/node_modules/postcss-loader/src/index.js!/Users/joshchernoff/Dev/morphic.pro/assets/css/app.css  mini-css-extract-plugin
         + 2 hidden modules

这只发生在捆绑为生产而不是开发时。我应该从哪里开始？

Answer 1

凭直觉，我想到了 tree shaking，事实上这就是问题所在。从我的 package.json 中删除 sideEffect: false 解决了这个问题。

捆绑生产时如何调试 webpack？

How to debug webpack when bundling for production?

webpack

css-loader

postcss-loader

webpack-4

mini-css-extract-plugin