日志美化
- friendly-errors-webpack-plugin 可以识别某些类型的wepack错误,并清理和聚合优先级
- node-notifier 提供系统通知
安装依赖
1
| npm install friendly-errors-webpack-plugin node-notifier -D
|
webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); + const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin'); + const notifier = require('node-notifier');
module.exports = { mode: 'development', context: process.cwd(), devtool: "source-map", entry: { main: './src/index.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' }, plugins: [ new HtmlWebpackPlugin(), + new FriendlyErrorsWebpackPlugin({ + onErrors: (severity, errors) => { + const error = errors[0]; + notifier.notify({ + title: severity + ': ' + error.name, + message: error.message + }) + } + }) ] }
|
速度分析
- speed-measure-webpack5-plugin 分析打包速度
安装依赖
1
| npm install speed-measure-webpack5-plugin -D
|
webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| const path = require('path'); const notifier = require('node-notifier'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin'); +const SpeedMeasureWebpack5Plugin = require('speed-measure-webpack5-plugin');
+const smw = new SpeedMeasureWebpack5Plugin();
+module.exports = smw.wrap({ mode: 'development', context: process.cwd(), devtool: "source-map", entry: { main: './src/index.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' }, plugins: [ new HtmlWebpackPlugin(), new FriendlyErrorsWebpackPlugin({ onErrors: (severity, errors) => { const error = errors[0]; notifier.notify({ title: severity + ': ' + error.name, message: error.message }) } }) ] +})
|
文件体积监控
- webpack-bundle-analyzer 生成代码分析报告,包括文件包含,大小占比,模块关系,依赖项,文件是否重复,压缩后大小等
安装依赖
1
| npm install webpack-bundle-analyzer -D
|
webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| const path = require('path'); const notifier = require('node-notifier'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin'); const SpeedMeasureWebpack5Plugin = require('speed-measure-webpack5-plugin'); +const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
const smw = new SpeedMeasureWebpack5Plugin();
module.exports = smw.wrap({ mode: 'development', context: process.cwd(), devtool: "source-map", entry: { main: './src/index.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' }, plugins: [ new HtmlWebpackPlugin(), new FriendlyErrorsWebpackPlugin({ onErrors: (severity, errors) => { const error = errors[0]; notifier.notify({ title: severity + ': ' + error.name, message: error.message }) } }), + new BundleAnalyzerPlugin({ + analyzerMode: 'disabled', + generateStatsFile: true, + }) ] })
|
package.json
1 2 3 4 5 6 7 8 9 10
| { ... "scripts": { "start": "webpack serve", "build": "webpack", "dev": "webpack --progress", + "analyzer": "webpack-bundle-analyzer --port 8888 ./dist/stats.json" }, ... }
|
上一节
下一节
本文作者: haise
本文地址: https://www.shifeng1993.com/2020/12/05/webpack_5/
版权声明: 转载请注明出处!