webpack2--tidying up

时间 2019-12-05

标签 webpack2 webpack tidying 繁體版

原文原文链接

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

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

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

windows设置

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

mac设置

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

在命令行中运行web

npm run remove

使用 CleanWebpackPlugin 插件清除构建目录

npm下载插件npm

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

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

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

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

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

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文件中定义函数ui

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

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

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

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

]);

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

Over！！！