一、前言
最近一段时间在学习 Webpack 方面的知识。在学习的过程中主要配置的是 webpack.config.js 文件。
但是在 Vue-cli 3.x 下,已经对 Webpack 做了深度的封装,很多已经是默认配置了,在这里就针对这些深入了解下,并区别说明下。
二、量化、分析
这里主要介绍两个插件,分别是量化打包时间,和打包后分析的。
1、speed-measure-webpack-plugin
这个包可以测量各个插件和 loader 所花费的时间,构建完成后会显示这样的信息:
这样在优化的时候就有了一个比较明确的对比概念。
安装:
npm i speed-measure-webpack-plugin -D
使用:
Vue-cli 2.x 中如下
//webpack.config.js
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp= newSpeedMeasurePlugin();
const config={//...webpack配置
}
module.exports= smp.wrap(config);
Vue-cli 3.x 中如下(主要区别是包裹 configureWebpack )
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
c