webpack：css代码提取插件extract-text-webpack-plugin和mini-css-extract-plugin

最新推荐文章于 2024-08-15 09:19:44 发布

Lvan的前端笔记

最新推荐文章于 2024-08-15 09:19:44 发布

阅读量1k

点赞数

分类专栏： # 前端工程化文章标签： webpack css rust

本文链接：https://blog.csdn.net/weixin_43972437/article/details/133277310

版权

前端工程化专栏收录该内容

28 篇文章

订阅专栏

文章介绍了如何在Webpack4.0及以后的版本中，使用mini-css-extract-plugin替换extract-text-webpack-plugin进行CSS资源的提取，包括配置和环境变量的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

extract-text-webpack-plugin

提取静态资源 css 等

const ExtractTextPlugin = require("extract-text-webpack-plugin");  //记得先install该模块
module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        scss: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader!sass-loader' })
                        css: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader' }),
                    }
                }
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({    //css的提取
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({   //css的提取
                    fallback: "style-loader",
                    use: ['sass-loader','postcss-loader']
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'css/[name].[contenthash].css',
            allChunks: true
        })
    ]

mini-css-extract-plugin

替代extract-text-webpack-plugin 进行资源提取。
webpack 4.0以前，我们通过extract-text-webpack-plugin插件，把css样式从js文件中提取到单独的css文件中。webpack 4.0以后，官方推荐使用mini-css-extract-plugin插件来打包css文件（从css文件中提取css代码到单独的文件中，对css代码进行代码压缩等）。

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production'
 
module.exports = {
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,  // 可以打包后缀为sass/scss/css的文件
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // 这里可以指定一个 publicPath
              // 默认使用 webpackOptions.output中的publicPath
              // publicPath的配置，和plugins中设置的filename和chunkFilename的名字有关
              // 如果打包后，background属性中的图片显示不出来，请检查publicPath的配置是否有误
              publicPath: './',  
              // publicPath: devMode ? './' : '../',   // 根据不同环境指定不同的publicPath
              hmr: devMode, // 仅dev环境启用HMR功能
            },
          },
          'css-loader',
          'sass-loader'
        ],
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      // 这里的配置和webpackOptions.output中的配置相似
      // 即可以通过在名字前加路径，来决定打包后的文件存在的路径
      filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
      chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
    })
  ]
}