webpack4---生产环境css样式丢失问题

最新推荐文章于 2023-01-06 17:34:00 发布

学渣蓝鲸

最新推荐文章于 2023-01-06 17:34:00 发布

阅读量6.9k

点赞数 3

分类专栏： webpack 文章标签：前端 webpack4 production 打包 css

本文链接：https://blog.csdn.net/qq_37800886/article/details/87856352

版权

在使用webpack4配置项目时，开发者可能遇到生产环境中CSS样式失效的问题。原因是tree shaking机制移除了未引用的代码，包括未被引用的CSS。解决办法是在webpack配置中明确指定CSS文件，使其不会被移除，从而确保生产环境中样式正常加载。

摘要由CSDN通过智能技术生成

相信有很多人跟我一样看webpack4官方文档进行学习配置，但是在配置的过程中遇到一个非常奇怪的问题——“明明开发环境显示的好好地样式，在生产环境就不生效了”。

//webpack.prod.js  
    plugins:[
        new HtmlWebpackPlugin({
            title:'production CSS分离',
            filename: 'index.html',
            template:'index.html',
            hash: true
        }),
        new MiniCssExtractPlugin({
            filename: "[name].[contenthash:4].css",
            chunkFilename: "[id].[contenthash:4].css"
        }),
    ],
    module:{
        rules:[
            {
                test:/\.css$/,
                exclude: /node_modules/,