Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Extract Text Plugin: require.ensure() causes incomplete file (Webpack 2)

See original GitHub issue

Hello. When using Extract Text Plugin with the option allChunks: true in conjunction with require.ensure(), incomplete output file being created.

Test case:

// webpack.config.js

var webpack           = require('webpack');
var path              = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    context: path.join(__dirname, '.'),
    entry: {
        bundle: ['./index.js'],
    },
    output: {
        path: path.join(__dirname, './output'),
        filename: 'bundle.js',
        chunkFilename: '[name].js',
    },
    module: {
        loaders: [
            {
                test: /\.css$/,                    
                include: path.join(__dirname, '.'),
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
            },
        ],
    },

    plugins: [
        new ExtractTextPlugin('styles.css', {allChunks: true}),
    ]
};

// index.js

require.ensure([], function(require) {    
    require('./moduleA.js');    
}, 'moduleA');

// moduleA.js

import styles from './moduleA.css';
import './moduleB.js';

/* moduleA.css */

.moduleA {
    color:red;
}

// moduleB.js

import styles from './moduleB.css';

/* moduleB.css */

.moduleB {
    color:blue;
}

Webpack’s output:

Version: webpack 2.1.0-beta.7
Time: 1643ms
     Asset      Size  Chunks             Chunk Names
moduleA.js   2.17 kB       0  [emitted]  moduleA
 bundle.js    4.5 kB       1  [emitted]  bundle
styles.css  51 bytes    0, 1  [emitted]  moduleA, bundle
   [0] ./index.js 96 bytes {1} [built]
   [1] multi bundle 28 bytes {1} [built]
   [2] ./moduleA.js 78 bytes {0} [built]
   [5] ./moduleB.js 35 bytes {0} [built]
    + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules

Actual output/styles.css contents:

/* moduleB.css */

.moduleB {
    color:blue;
}

Expected:

/* moduleA.css */

.moduleA {
    color:red;
}/* moduleB.css */

.moduleB {
    color:blue;
}

It seems from the webpack’s output, that in case when the plugin extracts from multiple chunks (moduleA, bundle), only the latter css file is used. Thanks!

Issue Analytics

State:
Created 7 years ago
Reactions:4
Comments:12 (5 by maintainers)

Top GitHub Comments

3reactions

damassicommented, Sep 7, 2016

@sokra, This is closed for webpack 2, but can you fix for webpack 1? The same issue is happening where chunks imported in files loaded via require.ensure don’t show up.

1reaction

damassicommented, Oct 26, 2016

Unfortunately not. Just a moment ago I pulled ExtractText out of our app and reverted to using style-loader – there were too many inconsistencies.

Top Results From Across the Web

Using Webpack 2 and extract-text-webpack-plugin

1 Answer 1 ... In case you are writing style rules in .vue file or seprate .scss file, with below webpack configurations you...

To v2 or v3 from v1 - webpack

This solves some problems with duplicate modules caused by loaders when using npm link or ... ExtractTextPlugin requires version 2 to work with...

From Require.js to Webpack — Part 2 (The How) - Medium

The first thing you do when you're converting from require.js to webpack is you take your whole require.js configuration file and convert it...

Webpack Usage Summary - SoByte

webpack vs gulp; Avoiding multiple configuration files; Locating webpack ... 1 2 3, var ExtractTextPlugin = require("extract-text-webpack-plugin"); ...

在webpack 中利用ExtractTextPlugin 合并的CSS 并不完整

css') 的css 用webpack 合并成为bundle_style.css。 ... Extract Text Plugin: require.ensure() causes incomplete file (Webpack 2) #2450.