【Webpack】常用 plugins 与配置

[swiftwind0405]

压缩JS文件

uglifyjs-webpack-plugin

webpack.config.js

const UglifyWebpackPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    optimization: {
        minimizer: [
            new UglifyWebpackPlugin({
                parallel: 4
            })
        ]
    }
}

terser-webpack-plugin

使用terser-webpack-plugin来压缩js文件，替换掉之前的 uglifyjs-webpack-plugin，解决uglifyjs不支持es6语法问题

webpack.config.js

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  plugins: [
    new TerserPlugin({
	    parallel: true,  // parallel 代表开启多进程
	    cache: true	     // 代表设置缓存
	}),
  ],
};

压缩CSS文件

使用 optimize-css-assets-webpack-plugin 来压缩 css 文件。

webpack.config.js

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    optimization: {
        minimizer: [
            new OptimizeCssAssetsWebpackPlugin()
        ]
    }
}

OptimizeCSSAssetsPlugin 中加载了一个 cssnano 的东西， cssnano 是 PostCSS 的 CSS 优化和分解插件，会自动采用格式很好的 CSS，并通过许多优化，以确保最终的生产环境尽可能小。

拷贝静态文件

可以利用 copy-webpack-plugin 这个插件将文件拷贝到目标目录下

webpack.config.js

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyPlugin([
      { from: 'source', to: 'dest' },
      { from: 'other', to: 'public' },
    ]),
  ],
};

打包前先清空输出目录

const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    plugins: [
        new CleanWebpackPlugin()
    ]
}

不是很建议这么使用，一般是在build命令前加rm -rf dist && webpack

热加载

代码改动，动态局部加载 HMR（模块热替换）

webpack自带的插件HotModuleReplacementPlugin、NamedModulesPlugin

const webpack = require('webpack');

module.exports = {
    plugins: [
            new webpack.NamedModulesPlugin(), // webpack自带的插件 以便查看修补patch依赖
    		new webpack.HotModuleReplacementPlugin()
    ]
}