按照当前的设置,每次构建时是不会清理构建目录的。因此,随着项目的变化,每次构建会不断累积文件。鉴于这可能会令人讨厌,你应该在两次构建之间清理一下构建目录。
另一个不错的方法是将本次的构建信息包含在每个文件顶部的小注释中,至少包括版本信息。
清理构建目录
这个问题,可以通过 Webpack 插件处理,也可以在 Webpack 外部解决。您可以运行 rm -rf ./build && webpack
或 rimraf ./build && webpack
,并把这个命令保存到 npm 脚本中。另外,task runner 一类的工具也可以解决这个问题
配置 CleanWebpackPlugin
首先安装 clean-webpack-plugin:
npm install clean-webpack-plugin --save-dev
接下来,我们定义一个函数来使用这个插件。您可以直接使用该插件,但这个插件作为一般的配置需求,还是写入下面的配置保存起来比较合适:
webpack.parts.js
...
const CleanWebpackPlugin = require("clean-webpack-plugin");
exports.clean = path => ({
plugins: [new CleanWebpackPlugin()],
});
将它合并到主配置上:
webpack.config.js
...
const productionConfig = merge([
parts.clean(),
...
]);
在此更改之后,build
目录每次构建时都会是干净的。您可以通过构建项目并检查输出目录中是否有旧文件来验证这一点。
将版本变动信息附加到构建中
将与当前构建版本相关的信息附加到构建文件本身可用于调试。webpack.BannerPlugin 允许您实现此目的。它可以与 git-revision-webpack-plugin 结合使用,在生成的文件开头生成一个小注释。
设置 BannerPlugin 和 GitRevisionPlugin
首先,安装插件:
npm install git-revision-webpack-plugin --save-dev
然后修改部分配置:
webpack.parts.js
...
const webpack = require("webpack");
const GitRevisionPlugin = require("git-revision-webpack-plugin");
exports.attachRevision = () => ({
plugins: [
new webpack.BannerPlugin({
banner: new GitRevisionPlugin().version(),
}),
],
});
并将合并到主配置上:
webpack.config.js
const productionConfig = merge([
...
parts.attachRevision(),
]);
如果您构建项目(npm run build
),您应该注意到构建的文件的开在包含类似于/*! 0b5bb05 */
或 /*! v1.7.0-9-g5f82fe8 */
的注释。
可以通过调整 banner 进一步自定义输出。您还可以通过 webpack.DefinePlugin
将版本变动信息传递给应用程序。“环境变量”一章中详细讨论了这种技术。
上述代码假设您正在使用 Git 来管理代码!否则,您会收到
fatal: Not a git repository (or any of the parent directories): .git
错误消息。如果您不使用 Git,您可以将 banner 替换为其他数据。
复制文件
复制文件是 Webpack 中的另一个普通操作。如果你需要将外部数据带到你的构建中而不需要 Webpack 编译它们,使用 copy-webpack-plugin 将会很方便。
如果你想以跨平台的方式在 Webpack 之外复制文件,cpy-cli 是一个不错的选择。
总结
通常,在 Webpack 中,处理问题的方式在于识别问题,并寻找一些插件来解决该问题。在 Webpack 之外解决这些类型的问题是完全可以接受的,但是 Webpack 通常也可以处理它们。
回顾一下: