webpack 4之css文件单独打包以及压缩

我使用的webpack版本是 “webpack”: “^5.38.1”,，webpack 4之后有很多东西用法发生了变化，在此简单记录使用中出现过的问题。

• 用 style-loader 使用 style 标签将样式插入到页面中
• 以下两部分一般同时用

抽离css文件

• 为了把css样式拎出来作为一个.css文件

npm install -D mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin')// 分离文件

module.exports = {
  module: {
     rules: [
       {
       // 模块规则
         test: /\.css$/,
         use: [{
             loader: MiniCssExtractPlugin.loader,
             options: {
                 // 异步css的加载路径
                 publicPath: './'
             }
         }, 'css-loader'],
         exclude: /node_modules/,
       }
     ]
  },
  plugins: [
    // 抽离css文件的插件
    new MiniCssExtractPlugin({
        // 同步加载的css资源名
        filename: 'css/[name].css',
        // 异步加载的css资源名
        chunkFilename: '[id].css'
    }),
  ]
}

压缩css文件

npm install -D optimize-css-assets-webpack-plugin

 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');// 压缩
 
 module.exports = {
   module: {
     // 压缩css文件的插件
     new OptimizeCssAssetsPlugin(),
   ]
 }