[英]extract-text-webpack-plugin removes all .js code
TL; DR:當生成兩個.js和一個.css塊時,插件會從其中一個.js塊中刪除所有.js代碼。
即使我只使用webpack文檔中的示例,這也是可重復的行為。
我可能會遺漏一些東西,但我找不到它是什么:)
配置如下:
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var glob = require("glob");
module.exports = {
entry: {
app: [
'./.build/app/app_dependencys.js',
'./.build/app/_helpers/api_helpers.js',
'./.build/app/event-manager.js',
'./.build/app/route_handlers/Router.js'
],
lib: [
'c3',
'lodash',
'moment',
'moment-timezone',
'pleasejs',
'react-bootstrap-datetimepicker',
'react',
'react-bootstrap',
'react-d3-components',
'react-datepicker-component',
'react-googlemaps',
'react-router',
'react-slider',
'reactable',
'select2'
],
css: glob.sync('./css/css/*.styl')
},
output: {
path: path.join(__dirname, 'js/dist'),
filename: "app.js",
chunkFilename: "[name].js"
},
module: {
loaders: [
{test: /\.jsx?$/, loader: 'babel?compact=false', ignore: /node_modules/},
{test: /\.json$/, loader: "json"},
{
test: /\.styl$/,
loader: ExtractTextPlugin.extract('raw', 'raw!stylus')
}
]
},
plugins: [
new ExtractTextPlugin('id', "./../../css/compiled/css.css", {allChunks: false}),
new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"lib", /* filename= */"lib.js", Infinity)
],
externals: ['jquery'],
bail: true
};
運行webpack
,這是輸出:
Time: 51884ms
Asset Size Chunks Chunk Names
app.js 3.8 kB 0, 1 [emitted] app, css
lib.js 3.47 MB 2 [emitted] lib
./../../css/compiled/css.css 131 kB 1 [emitted] css
[0] multi app 64 bytes {0} [built]
[0] multi css 364 bytes {1} [built]
[0] multi lib 196 bytes {2} [built]
+ 634 hidden modules
Child extract-text-webpack-plugin:
+ 1 hidden modules
Child extract-text-webpack-plugin:
+ 1 hidden modules
Child extract-text-webpack-plugin:
+ 1 hidden modules
.... it goes on for a while ...
結果是:
css.css
根據需要包含所有css lib.js
根據需要包含所有lib代碼 app.js
: app.js
每個條目都被替換為
/***/ 581: /***/ function(module, exports) { // removed by extract-text-webpack-plugin /***/ }, /***/ 582: /***/ function(module, exports) { // removed by extract-text-webpack-plugin /***/ }, ...
也向插件作者報告: https : //github.com/webpack/extract-text-webpack-plugin/issues/118
在這里回答: https : //github.com/webpack-contrib/extract-text-webpack-plugin/issues/118
好吧,對我有用的是:good:entry:{js:'。/ js / app.js',css:'。/ scss / main.scss'},bad:entry:{js:'。/ js / app.js',scss:'。/ scss / main.scss'}唯一的區別 - css鍵而不是scss。 還有條目:['。/ js / main.js','。/ scss / main.scss'],也可以。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.