1

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

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

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

4

1 回答 1

0

你可以这样做

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;
于 2017-10-04T06:25:25.620 回答