Plugin removes all .js code from a chunk #118

Open
dmitriid opened this Issue Oct 15, 2015 · 15 comments

Projects

None yet
@dmitriid

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: [
            './.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

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

same problem

@TrejGun
TrejGun commented Dec 25, 2015

๐Ÿ‘

@preschian

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

@olegggI
olegggI commented Feb 21, 2016

the same

@redhead
redhead commented Apr 8, 2016

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

@codisms
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.

@fezhengjin

same problem

@scythargon

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

@dlebedynskyi

Same problem. any workaround?

@scythargon

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.

@codisms
codisms commented Jun 3, 2016

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

@dlebedynskyi
dlebedynskyi commented Jun 3, 2016 edited

I'm getting something really weird
image

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: [
        'babel-polyfill',
        './src/bootstrap',
        './src/scss/global.scss'
    ],
    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
olegggI commented Jan 3, 2017

try:
filename: "[name].js"

@bebraw bebraw added the bug label Jan 29, 2017
@ryanbagwell

Anybody else find a solution for this?

@Twiksss87
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