Webpack在样式加载器和extract-text-webpack-plugin之间切换

Question

I have development and production webpack configurations where I switch between using style-loader and extract-text-webpack-plugin to bundle CSS, respectively. This is because my development config uses hot module replacement, and thus requires inline-styles, while my production config does not.

However, upon switching from production to development, I've noticed that the extracted main.css left over from my production webpack build is overriding the inline styles of my style-loader . This means that hot reloading does not work on CSS changes.

First, shouldn't my inline styles override my external main.css stylesheet, so why is this occurring? Second, if this is expected behavior, what is the general convention for dealing with this? Should I use some webpack "cleaning" plugin to remove main.css in my development config?

Answer 1

You can do like this

const webpack = require('webpack');
const path = require('path');
const env = require('./env.json');

var conf = {

    resolve: {
        extensions: ['', '.ts', '.js'],
        root: __dirname,
        modulesDirectories: ['node_modules']
    },
    module: {
        rules: [
            //Some common Loaders Here
            {
                test: /\.js$/,
                loader: 'source-map-loader',
                exclude: [
                    'node_modules/rxjs'
                ]
            }

        ],
        loaders: [{
            test: /\.ts$/,
            loader: 'awesome-typescript-loader'
        }],
    },
    plugins: [
        //Some common plugins Here ,
    ],
    output: {
        path: 'src',
        filename: '[name].bundle.js',
        sourceMapFilename: '[name].bundle.map',
        //chunkFilename: '[id].[chunkhash].chunk.js'
    }
};

if (env.dev) {
    conf.module.rules.push({
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
        })
    });
    conf.plugins.push(new ExtractTextPlugin("styles.css"));

} else {

    conf.module.rules.push({
        test: /\.css$/,
        use: [{
                loader: "style-loader"
            },
            {
                loader: "css-loader"
            }
        ]
    });


}

module.exports = conf;