npm run build时发生了什么？
1、在node环境下运行build.js
2、build.js里使用webpack.pro.js作为配置来打包
- 与webpack.base.js 合并配置
- 从pro.env index.js拿出环境变量、配置变量
webpack.base.conf.js:定义基础配置，生产和开发环境都需要的配置项
npm run dev时发生了什么？
将配置文件指定为webpack.dev.conf.js
plugins
- webpack.DefinePlugin 在打包阶段定义全局变量，可以在业务代码中直接引用
- webpack.HashedModuleldsPlugin 保持moudle.id稳定
- hash：标识资源是否改变，浏览器是否需要重新加载or缓存读取
修改代码重新打包moudle.id改变，导致图片的hash改变，浏览器又得重新读取
- hash：标识资源是否改变，浏览器是否需要重新加载or缓存读取
- webpack.NoEmitOnErrosPlugin 屏蔽错误，出现错误开发模式不退出
- webpack.ProvidePlugin 提供第三方库,不需要单独引用
- copy-webpack-plugin 帮助拷贝内容
优化
-
Dll优化
一般第三方的包不会变，但是webpack每次打包还是会去处理
所以先对第三方包处理然后在打包
webpack.dll.js
图片发自简书App
image.png
-
Happypack
js是单线程，node是可以开webWork
利用node的webWork多线程处理文件，代替babel-loader处理js，一般根据CPU核数来决定开几个线程
image.png
图片发自简书App
图片发自简书App
解决方案归纳
loader 对某一种类型（js\css\图片\视频）文件的内容进行处理
plugin 增加一些特殊的功能
在apply对打包的某个周期进行监听
done 打包完成，dist目录已经形成
emit
