vue-cli webpack浅析

时间:2022-04-26 07:50:39

一直对脚手架的webpack配置很感兴趣。

长话短说,先从npm start开始。

打开package.json 找到scripts

vue-cli webpack浅析

可以看到start 运行的是dev, dev 又是从 build/webpack.dev.conf.js 开始的。

npm start 做了什么

npm start =》 npm run dev =》webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0

拆解一下 webpack-dev-server  可以提供一个web服务器,在你有更改的时候可以自动刷新。为什么是webpack-dev-server?webpack提供三个解决方法,推荐webpack-dev-server

贴上图片

vue-cli webpack浅析

vue-cli webpack浅析

现在知道是使用的webpack-dev-server起的服务 那么--inline 是什么意思呢?

因为webpack-dev-server 提供两种刷新方式,一种是iframe 一种是inline 。 所以这里--inline代表 使用inline模式。

vue-cli webpack浅析

内联模式是inline 轮询模式是iframe。

再往后看 --progress 加上以后可以将运行进度输出到控制台。

继续 --config 告诉webpack-dev-server 配置文件使用此选项后面的文件 也就是 build/webpack.dev.conf.js

最后 --host 0.0.0.0 指定使用一个 host。默认是 localhost。如果你希望服务器外部可访问,指定如下:

vue-cli webpack浅析

至此npm start发什么了什么,我们大致知道了,所以 去看build/webpack.dev.conf.js。