vue中webpack默认配置_Vue-cli 中 Webpack 配置优化（一）

一、前言

最近一段时间在学习 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