Javascript ExtractTextPlugin仅适用于webpack';s—内联标志
首先,我会说我对Webpack是新手,所以如果这是一个愚蠢的问题,我道歉 据我所知,--inline标志与webpack dev server一起用于热加载 但是,在使用ExtractTextPlugin并执行以下操作时:Javascript ExtractTextPlugin仅适用于webpack';s—内联标志,javascript,css,webpack,Javascript,Css,Webpack,首先,我会说我对Webpack是新手,所以如果这是一个愚蠢的问题,我道歉 据我所知,--inline标志与webpack dev server一起用于热加载 但是,在使用ExtractTextPlugin并执行以下操作时: webpack webpack.config.js 我得到了一个包含大量警告和一些错误的输出: Hash: af8bbcc48570fd43cda4 Version: webpack 1.13.1 Time: 9383ms
webpack webpack.config.js
我得到了一个包含大量警告和一些错误的输出:
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 ^\.\/.*$
(它没有使用webpack dev server,因为我不想为了这个问题而重新加载)
我的输出是:
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
现在请注意,文件大小为278KB,没有更多的警告/错误
我的webpack.config.js看起来像:
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'
};
我的问题是:
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'
};