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

【问题标题】：Webpack switching between style-loader and extract-text-webpack-pluginWebpack 在 style-loader 和 extract-text-webpack-plugin 之间切换
【发布时间】：2018-03-03 01:28:08
【问题描述】：

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

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

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

【问题讨论】：

main.css 覆盖内联样式的原因有很多。您能否发布一个 main.css 示例以供分析？
我同意这一点。我们需要一个覆盖内联样式的 main.css 中的 CSS 类示例。您还应该使用一个程序来清理您的目录。

标签： javascript css webpack webpack-dev-server hot-module-replacement

【解决方案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;

【讨论】：