webpack抽离压缩css文件

线上开发的时候 需要将css 抽离出来 进行压缩 减少体积 所以只需要在相对应的线上配置文件中配置
如果不抽离 js css 都在同一个文件里

const path = require('path')
const webpack = require('webpack')
const { merge } = require('webpack-merge')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const webpackCommonConf = require('./webpack.common.js')
const { srcPath, distPath } = require('./paths')

module.exports = merge(webpackCommonConf, {
   mode: 'production',
   output: {
       // filename: 'bundle.[contenthash:8].js',  // 打包代码时，加上 hash 戳
       filename: '[name].[contenthash:8].js', // name 即多入口时 entry 的 key
       path: distPath,
       // publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
   },
   module: {
       rules: [
           // 图片 - 考虑 base64 编码的情况
           {
               test: /\.(png|jpg|jpeg|gif)$/,
               use: {
                   loader: 'url-loader',
                   options: {
                       // 小于 5kb 的图片用 base64 格式产出
                       // 否则，依然延用 file-loader 的形式，产出 url 格式
                       limit: 5 * 1024,

                       // 打包到 img 目录下
                       outputPath: '/img1/',

                       // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
                       // publicPath: 'http://cdn.abc.com'
                   }
               }
           },
           // 抽离 css
           {
               test: /\.css$/,
               use: [
                   MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
                   'css-loader',
                   'postcss-loader'
               ]
           },
           // 抽离 less
           {
               test: /\.less$/,
               use: [
                   MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
                   'css-loader',
                   'less-loader',
                   'postcss-loader'
               ]
           }
       ]
   },
   plugins: [
       new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
       new webpack.DefinePlugin({
           // window.ENV = 'production'
           ENV: JSON.stringify('production')
       }),

       // 抽离 css 文件 在根目录下 生产css 文件夹 并生成main
       new MiniCssExtractPlugin({
           filename: 'css/[name].[contenthash:8].css'
       })
   ],

   optimization: {
       // 压缩 css
       minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
   }
})

打包后

image.png