捆绑生产时如何调试webpack



我目前正在学习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

这种情况只发生在捆绑生产时,而不是在开发时。我应该从哪里开始?

有一种预感,我想到了树的摇晃,事实上这就是问题所在。从我的软件包.json中删除sideEffect: false解决了这个问题。

相关内容

  • 没有找到相关文章

最新更新