Webpack 每一次构建都会将结果输出到指定目录,如过不清理输出目录的话,目录下的文件会越来越多、越来越乱。因此,我们需要在每次构建之前,先清理构建目录。

如何清理构建目录

通常又两种做法,一种是直接在 npm scripts 中通过 rm -rf ./build && webpack 或者 rimraf ./build && webpack 的方式来直接清理目录,另一种是通过 clean-webpack-plugin 插件来实现。

安装 clean-webpack-pluginopen in new window 插件

npm add clean-webpack-plugin --develop
1

添加到配置中:

webpack.parts.js

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

exports.clean = () => ({ plugins: [new CleanWebpackPlugin()] });
1
2
3

webpack.config.js

const path = require("path");

const commonConfig = merge([
  { output: { path: path.resolve(process.cwd(), "dist") } },
  parts.clean(),
  ...
]);
1
2
3
4
5
6
7

这样配置一次,每次构建之前,Webpack 都会先清空构建输出目录。

给输出文件添加版本说明

给构建输出的文件添加当次构建的版本号可以极大的方便问题定位。webpack.BannerPluginopen in new window 可以实现这个功能,与 git-revision-webpack-pluginopen in new window 插件结合使用的时候,我们可以在输出文件中添加注释。

安装依赖包:

npm add git-revision-webpack-plugin --develop
1

webpack.parts.js

const webpack = require('webpack');
const GitRevisionPlugin = require('git-revision-webpack-plugin');

exports.attachRevision = () => ({
  plugins: [
    new webpack.BannerPlugin({
      banner: new GitRevisionPlugin().version(),
    }),
  ],
});
1
2
3
4
5
6
7
8
9
10

webpack.config.js

const productionConfig = merge([...parts.attachRevision()]);
1

执行 npm run build, 我们可以看到输出目录中,以 .LICENSE.txt 结尾的文件,文件开头都有类似于 /*! 0b5bb05 *//*! v1.7.0-9-g5f82fe8 */ 的注释。文件开头的注释可以定制,我们可以通过 webpack.DefinePlugin 来实现。

拷贝文件

我们可以通过 Webpack 将一些文件在不打包处理的情况下直接拷贝到输出目录中。在 Webpack 中可以使用 copy-webpack-pluginopen in new window 这个插件。

除了 Webpack 插件,也可以使用 cpy-cliopen in new window 这个命令行工具。

总结

Webpack 中的很多插件都是在完成一个独立的任务,此时 Webpack 更像是一个任务执行器。当然,我们也可以借助去其他工具完成这些任务。

通常可以在构建输出中添加当次构建的版本号,方便问题定位。

关注微信公众号,获取最新推送~