当先锋百科网

首页 1 2 3 4 5 6 7

webpack-clean-plugin webpack-css-plugin 定义全局参数 webpack-压缩css代码

1、webpack-clean-plugin

(1)什么是clean-webpack-plugin

webpack-clean-plugin会在打包之前将我们指定的文件夹清空，然后再存放新打包的内容, 避免新老混淆问题。

(2)clean-webpack-plugin使用

https://github.com/johnagan/clean-webpack-plugin

安装clean-webpack-plugin：

npm install --save-dev clean-webpack-plugin

配置clean-webpack-plugin：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [new CleanWebpackPlugin()]

2、webpack-css-plugin

(1)什么是mini-css-extract-plugin

mini-css-extract-plugin是一个专门用于将打包的CSS内容提取到单独文件的插件，前面我们通过style-loader打包的CSS都是直接插入到head中的。

(2)mini-css-extract-plugin使用

https://webpack.js.org/plugins/mini-css-extract-plugin/

安装：

npm install --save-dev mini-css-extract-plugin

配置：

// 将css提取到单独文件

new MiniCssExtractPlugin({
    filename: './css/[name].css',
}),

替换style-loader：

{
     loader: MiniCssExtractPlugin.loader,
},

注意点: 如果相关文件资源无法显示, 需要根据打包后的结构手动设置公开路径

options: {
    publicPath: "xxx"
}

3、定义全局参数

new webpack.DefinePlugin({
      BASE_URL: JSON.stringify('/mock'),
}),

4、webpack-压缩css代码

(1)mini-css-extract-plugin压缩css

https://www.npmjs.com/package/mini-css-extract-plugin

(2)安装JS代码压缩插件

npm install --save-dev terser-webpack-plugin

(3)安装CSS代码压缩插件

npm install --save-dev optimize-css-assets-webpack-plugin

(4)导入插件

const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

(5)配置webpack优化项

optimization: {
   minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
Or:
minimizer: [
      new UglifyJsPlugin({
        parallel: true,
        sourceMap: false,
        uglifyOptions: {
          warnings: false,
          comments: false,
        },
      }),
      new OptimizeCSSPlugin({
        cssProcessorOptions: { safe: true, map: { inline: false } },
      }),
    ],
}

注意: 由于配置了webpack的optimization.minimizer项目会覆盖默认的JS压缩选项,所以JS代码也需要通过插件自己压缩.