清理构建目录

按照当前的设置,每次构建时是不会清理构建目录的。因此,随着项目的变化,每次构建会不断累积文件。鉴于这可能会令人讨厌,你应该在两次构建之间清理一下构建目录。

另一个不错的方法是将本次的构建信息包含在每个文件顶部的小注释中,至少包括版本信息。

清理构建目录

这个问题,可以通过 Webpack 插件处理,也可以在 Webpack 外部解决。您可以运行 rm -rf ./build && webpackrimraf ./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 通常也可以处理它们。

回顾一下:

  • 您可以找到许多解决任务的小插件,这是的 Webpack 有点类似于 task runner。
  • 这些任务包括清理构建和应用部署。“部署应用”一章详细讨论了后一主题。
  • 向生产版本添加小注释以告知已部署的版本是一个好主意。这样您就可以更快地调试潜在问题。
  • 清理构建目录这样的辅助任务可以在 Webpack 之外执行。如果您正在使用“多页”一章中讨论的配置,则必须使用此功能。
用户头像
登录后发表评论