webpack使用mini-css-extract-plugin插件分离css样式后压缩css样式代码已及js代码

转载于 2020-03-02 22:17:29 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_43526371/article/details/108733268

本文详细介绍了如何使用TerserJSPlugin、OptimizeCSSAssetsPlugin和MiniCssExtractPlugin等插件优化Webpack构建过程，实现JS和CSS文件的压缩及提取，提高项目打包效率。

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

npm i terser-webpack-plugin optimize-css-assets-webpack-plugin -D
webpack.config.js中配置优化项 optimization:

const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
  optimization: {//优化项
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  },
 //使用mini-css-extract-plugin插件
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
      //使用mini-css-extract-plugin的loader代替'style-loader'
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};