I'll start this off by saying I'm new to Webpack, so I apologize if this is a silly question.
From what my understanding is the --inline flag is used with webpack-dev-server for hot loading.
However, when using the ExtractTextPlugin and doing:
webpack webpack.config.js
I get an output with a lot of warnings and some errors:
Hash: af8bbcc48570fd43cda4
Version: webpack 1.13.1
Time: 9383ms
Asset Size Chunks Chunk Names
bundle.js 2.96 MB 0 [emitted] main
../css/styles.css 82 bytes 0 [emitted] main
bundle.js.map 3.54 MB 0 [emitted] main
../css/styles.css.map 94 bytes 0 [emitted] main
[0] multi main 40 bytes {0} [built]
[1] ./www/assets/js/entry.js 2 kB {0} [built]
[8] ./webpack.config.js 1.24 kB {0} [built]
+ 524 hidden modules
WARNING in ./~/fsevents/fsevents.js
Critical dependencies:
11:13-71 the request of a dependency is an expression
@ ./~/fsevents/fsevents.js 11:13-71
WARNING in ./~/fsevents/~/node-pre-gyp/lib/util/nw-pre-gyp/package.json
Module parse failed: /Users/mt24/Documents/demo/node_modules/fsevents/node_modules/node-pre-gyp/lib/util/nw-pre-gyp/package.json Unexpected token (2:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:6)
at Parser.pp.raise (/Users/mt24/Documents/demo/node_modules/acorn/dist/acorn.js:923:13)
at Parser.pp.unexpected (/Users/mt24/Documents/demo/node_modules/acorn/dist/acorn.js:1490:8)
at Parser.pp.semicolon (/Users/mt24/Documents/demo/node_modules/acorn/dist/acorn.js:1469:73)
at Parser.pp.parseExpressionStatement (/Users/mt24/Documents/demo/node_modules/acorn/dist/acorn.js:1994:8)
at Parser.pp.parseStatement (/Users/mt24/Documents/demo/node_modules/acorn/dist/acorn.js:1772:188)
at Parser.pp.parseBlock (/Users/mt24/Documents/demo/node_modules/acorn/dist/acorn.js:2009:21)
at Parser.pp.parseStatement (/Users/mt24/Documents/demo/node_modules/acorn/dist/acorn.js:1753:19)
at Parser.pp.parseTopLevel (/Users/mt24/Documents/demo/node_modules/acorn/dist/acorn.js:1666:21)
at Parser.parse (/Users/mt24/Documents/demo/node_modules/acorn/dist/acorn.js:1632:17)
at Object.parse (/Users/mt24/Documents/demo/node_modules/acorn/dist/acorn.js:885:44)
at Parser.parse (/Users/mt24/Documents/demo/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock.<anonymous> (/Users/mt24/Documents/demo/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/Users/mt24/Documents/demo/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/Users/mt24/Documents/demo/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /Users/mt24/Documents/demo/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.provide (/Users/mt24/Documents/demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:52:20)
at CachedInputFileSystem.readFile (/Users/mt24/Documents/demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:140:24)
at DependenciesBlock.onLoadPitchDone (/Users/mt24/Documents/demo/node_modules/webpack-core/lib/NormalModuleMixin.js:255:7)
at DependenciesBlock.loadPitch (/Users/mt24/Documents/demo/node_modules/webpack-core/lib/NormalModuleMixin.js:182:27)
at DependenciesBlock.doBuild (/Users/mt24/Documents/demo/node_modules/webpack-core/lib/NormalModuleMixin.js:241:4)
at DependenciesBlock.build (/Users/mt24/Documents/demo/node_modules/webpack/lib/NormalModule.js:84:14)
at Compilation.buildModule (/Users/mt24/Documents/demo/node_modules/webpack/lib/Compilation.js:126:9)
at /Users/mt24/Documents/demo/node_modules/webpack/lib/Compilation.js:309:10
at /Users/mt24/Documents/demo/node_modules/webpack/lib/NormalModuleFactory.js:58:13
at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/mt24/Documents/demo/node_modules/tapable/lib/Tapable.js:75:69)
at onDoneResolving (/Users/mt24/Documents/demo/node_modules/webpack/lib/NormalModuleFactory.js:38:11)
at onDoneResolving (/Users/mt24/Documents/demo/node_modules/webpack/lib/NormalModuleFactory.js:121:6)
at /Users/mt24/Documents/demo/node_modules/webpack/lib/NormalModuleFactory.js:116:7
at /Users/mt24/Documents/demo/node_modules/async/lib/async.js:726:13
at /Users/mt24/Documents/demo/node_modules/async/lib/async.js:52:16
@ ./~/fsevents/~/node-pre-gyp/lib ^\.\/.*$
Also, notice the file size for bundle.js is 2.96 MB versus when I do :
webpack --inline webpack.config.js
(It's not using webpack-dev-server because I don't want hot-reloading for the purpose of this question)
My output is :
Hash: 7543a8fc94cb447e7082
Version: webpack 1.13.1
Time: 11073ms
Asset Size Chunks Chunk Names
bundle.js 278 kB 0 [emitted] main
../css/styles.css 82 bytes 0 [emitted] main
bundle.js.map 351 kB 0 [emitted] main
../css/styles.css.map 94 bytes 0 [emitted] main
[0] multi main 28 bytes {0} [built]
[1] ./www/assets/js/entry.js 2 kB {0} [built]
+ 6 hidden modules
Child extract-text-webpack-plugin:
+ 2 hidden modules
Now notice the file size is at 278 kB and there are no more warnings / errors.
My webpack.config.js looks like:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var nodeModulesPath = path.join(__dirname, 'node_modules');
module.exports = {
entry : [path.join(__dirname, '/www/assets/js/entry')],
output: {
filename: 'bundle.js',
path: path.join(__dirname, '/www/dist/assets/js')
},
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
},
{
test: /\.es6\.js$/,
exclude: nodeModulesPath,
loader: 'babel-loader',
query : {
presets : ['es2015']
}
},
{
test: /\.json$/,
loader: 'json-loader',
exclude: nodeModulesPath,
},
],
},
plugins : [
new ExtractTextPlugin(path.join('..','css', 'styles.css'))
],
resolveLoaded : {
root : nodeModulesPath
},
resolve: {
extensions: ['', '.js', '.es6', '.json', '']
},
node: {
console: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty'
},
devtool : 'source-map'
};
My questions are:
Should I always be using the --inline flag? Is this standard practice?
Why does the file size of bundle.js increase soo much when the --inline is removed?
Does using --inline cause any strange behavior once this gets bundled for a production build?