I'm currently working learning webpack and have a working development config but when trying to use that same config for production everything but the css bundles.
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
My assumption is that this is the problem.
[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
This only happens when bundling as production and not on development. Where should I start?
On a hunch, I thought about tree shaking and in fact this was the issue.
Removing sideEffect: false from my package.json fixed this issue.