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]   打包时报错 

  Path variable [contenthash] not implemented in this context: static/[name]/styles.[contenthash].css

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

 

 

webpack   详细X

网络释义

webpack: 工具

webpack suite: 并与布局布线工具

grunt gulp webpack: 项目构建