webpack2--tidying up

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！！！