Question

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

然而，在从生产切换到开发之后，我注意到从我的生产webpack构建中遗留的提取的main.css 覆盖我的{{1的内联样式}}。这意味着热重新加载不适用于CSS更改。

首先，我的内联样式不应覆盖我的外部style-loader样式表，为什么会出现这种情况？其次，如果这是预期的行为，处理这个问题的一般惯例是什么？我应该使用一些网络包＆＃34;清洁＆＃34;插件在我的开发配置中删除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;

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

1 个答案: