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
,
}),