webpack如何配置，详细点，从 npm init 开始到配置到打包，整个流程

1. npm init
2. webpack.config.js
3. 入口文件
4. mode、entry、output
5. module.rules、plugins
6. HtmlWebpackPlugin
7. devServer

如何提升 webpack 编译速度

缓存优化

hard-source-webpack-plugin，这插件为模块提供中间缓存步骤，但项目得跑两次，第一次构建时间正常，第二次大概能省去90%左右的时间。

npm i hard-source-webpack-plugin -D

webpack.config.js

plugins: [
  new HardSourceWebpackPlugin()
]

vue.config.js

chainWebpack: (config) => {
  config.plugin('cache').use(HardSourceWebpackPlugin)
}

说说 webpack 的构建流程?

webpack 的运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来

在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条webpack机制中，去改变webpack的运作，使得整个系统扩展性良好

从启动到结束会依次执行以下三大步骤：