webpack2--tidying up

2019独角兽企业重金招聘Python工程师标准>>>

webpack2--tidying up，本学习记录来自于：webpack2书籍

tidying up的理由：一次次的setup，导致以前每次使用webpack时产生的的构建目录（Build Directory）并没有被删除,一次次累积这看起来很烦；另一方面，在bundle中顶部加上注释和版本号是一种非常好的体验。

使用npm script清理构建目录 ——package.json中script设置脚本

• windows设置

scripts{
    …，
    "remove":"rimraf ./build" 
}

• mac设置

scripts{
    …，
    "remove":"rm -rf ./build" 
}

在命令行中运行

npm run remove

使用 CleanWebpackPlugin 插件清除构建目录

npm下载插件

npm install clean-webpack-plugin --save-dev

在webpack.parts.js文件中定义函数

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

exports.clean = (path) => ({
  plugins: [
    new CleanWebpackPlugin([path]),
  ],
});

在webpack.json.js文件中引用该函数

const productionConfig = merge([
  parts.clean(PATHS.build),
  ...
]);

现在动手验证，旧的构建目录将被删除，成功了。

为bundles添加构建注释—— BannerPlugin 和 GitRevisionPlugin（原文说这是为了 debugging）

npm下载 git-revision-webpack-plugin 插件

npm install git-revision-webpack-plugin --save-dev

在webpack.parts.js文件中定义函数

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

exports.attachRevision = () => ({
  plugins: [
    new webpack.BannerPlugin({
      banner: new GitRevisionPlugin().version(),
    }),
  ],
});

在webpack.json.js主配置中调用插件

const productionConfig = merge([
  ...
  parts.attachRevision(),

]);

在你构建项目后，文件前面会看见类似/*! 0b5bb05 */或者``` /*! v1.7.0-9-g5f82fe8 */

Over！！！

转载于:https://my.oschina.net/u/3554461/blog/994065