javascript - Webpack 在 style-loader 和 extract-text-webpack-plugin 之间切换

Question

我有开发和生产 webpack 配置，我分别在使用 style-loader 和 extract-text-webpack-plugin 来捆绑 CSS 之间切换。这是因为我的开发配置使用热模块替换，因此需要内联样式，而我的生产配置则不需要。

但是，从生产切换到开发后，我注意到从生产 webpack 构建中提取出来的 main.css 会覆盖我的内联样式样式加载器。这意味着热重载不适用于 CSS 更改。

首先，我的内联样式不应该覆盖我的外部 main.css 样式表，那么为什么会发生这种情况呢？其次，如果这是预期的行为，那么处理此问题的一般惯例是什么？我应该使用一些 webpack“清理”插件来删除我的开发配置中的 main.css 吗？

Answer 1

你可以这样做

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;