Plugin removes all .js code from a chunk #118

dmitriid opened this Issue Oct 15, 2015 · 15 comments


None yet

TL;DR: when generating two .js and one .css chunks the plugin removes all .js code from one of the .js chunks.

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: [
        lib: [
        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

/***/ },
mrsum commented Dec 22, 2015

same problem

TrejGun commented Dec 25, 2015



same problem about 'removed by extract-text-webpack-plugin'

olegggI commented Feb 21, 2016

the same

redhead commented Apr 8, 2016

Does anyone has a solution / workaround? Is this plugin even mantained?

codisms commented Apr 22, 2016

What I've found is that the JS section for the CSS is extracted into it's own file, but the source map ends up getting wiped out. The resolution to this was to add "?sourceMap" to the "css-loader".

The problem I found with this is that it mangles the source names in the source map. Not sure what to do about that yet.


same problem


Okay folks, any updates or workarounds may be with another plugins for css? Same problem here.


Same problem. any workaround?


Okay, what worked for me is:
entry: { js: './js/app.js', css: './scss/main.scss' },
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.

codisms commented Jun 3, 2016

Did you have sourcemaps enabled? That appears to be the hitch.

dlebedynskyi commented Jun 3, 2016 edited

I'm getting something really weird

and webpack config parts

const CSS_LOADER = `css?sourceMap&modules&importLoaders=1&${LOCAL_IDENT_NAME}?root=${ROOT_PUBLIC}!postcss-loader!sass?sourceMap!toolbox`;
module.exports = {
    entry: [
    output: {
        filename: 'bootstrap.js',
        path: path.join(__dirname, PATH)
// Load SCSS
                test: /\.scss$/,
                loader: `style!${CSS_LOADER}` // ExtractTextPlugin.extract('style', CSS_LOADER)

I even tried to remove ExtractTextPlugin entirely but still getting same errors.
Also found that on production build with this - all works fine

    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        new ExtractTextPlugin('style.css', {
            allChunks: true
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compressor: {
                screw_ie8: true,
                keep_fnames: true,
                warnings: false
            mangle: {
                screw_ie8: true,
                keep_fnames: true
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.AggressiveMergingPlugin()

Same goes for eval - * devtool config likecheap-module-eval-source-map. all works fine...
weird. anyone has idea what could be causing this?

olegggI commented Jan 3, 2017

filename: "[name].js"

@bebraw bebraw added the bug label Jan 29, 2017

Anybody else find a solution for this?

Twiksss87 commented Feb 20, 2017 edited

scythargon commented on 3 Jun 2016

it's work for me, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment