webpack

一、thread-loader提高编译速度
1. 安装： npm install --save-dev thread-loader

2. webpack.config.js 配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve('src'),
        use: [
          "thread-loader",
          // 耗时的 loader （例如 babel-loader）
        ],
      },
    ],
  },
};

效果：效果不大。。

参考：https://www.webpackjs.com/loaders/thread-loader/

二、清空原有文件夹里的内容

// 安装
npm i -D clean-webpack-plugin

// webpack.config.js 配置

...
const CleanWebpackPlugin = require('clean-webpack-plugin'); //引入清除文件插件
... 

plugins: [
    ...,
    new CleanWebpackPlugin(['dist']),//实例化，参数为目录
  ],

三、 其他用到的东西

1. –profile 查看process相关耗时等性能因素

2. –progress 进度

3. 

• [hash]。hash值是特定于整个构建过程的。

• [chunkhash]。hash值是特定于每一个文件的内容的。

• webPack 升级到 4.x导致 css文件名称使用 [contenthash:8]   打包时报错 

  extract-text-webpack-plugin 无法使用
  new ExtractTextPlugin({
  filename: [name]_[md5:contenthash:hex:8].css,
  }),

X

网络释义

webpack: 工具

webpack suite: 并与布局布线工具

grunt gulp webpack: 项目构建

原文链接：https://www.cnblogs.com/keepLeung/p/14357029.html
本文来源 爱码网，其版权均为 原网址 所有 与本站无关，文章内容系作者个人观点，不代表 本站 对观点赞同或支持。如需转载，请注明文章来源。