清理构建目录 | 众里千寻

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

添加到配置中：

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

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()]);

执行 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 更像是一个任务执行器。当然，我们也可以借助去其他工具完成这些任务。

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

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

加微信，深入交流~

# 如何清理构建目录

# 给输出文件添加版本说明

# 拷贝文件

# 总结

如何清理构建目录

给输出文件添加版本说明

拷贝文件

总结