TL;DR: when generating two .js and one .css chunks the plugin removes all .js code from one of the .js chunks.
This is repeatable behaviour even if I only use the examples from the webpack docs.
I may be missing something, but I can't find what it is :)
The config is as follows:
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
};
When running webpack
, this is the output:
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 ...
As a result:
css.css
contains all css, as required lib.js
contains all lib code, as required app.js
: every single entry in app.js is replaced with
/***/ 581: /***/ function(module, exports) { // removed by extract-text-webpack-plugin /***/ }, /***/ 582: /***/ function(module, exports) { // removed by extract-text-webpack-plugin /***/ }, ...
Reported to the plugin authors as well: https://github.com/webpack/extract-text-webpack-plugin/issues/118
answer here: https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/118
Okay, what worked for me is: good: entry: { js: './js/app.js', css: './scss/main.scss' }, bad: entry: { js: './js/app.js', scss: './scss/main.scss' } the only difference - css key instead of scss. And also entry: [ './js/main.js', './scss/main.scss' ], works too.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.