Webpack

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改变，浏览器又得重新读取
• webpack.NoEmitOnErrosPlugin 屏蔽错误，出现错误开发模式不退出
• webpack.ProvidePlugin 提供第三方库,不需要单独引用
• copy-webpack-plugin 帮助拷贝内容

---

优化

• Dll优化
  一般第三方的包不会变，但是webpack每次打包还是会去处理
  所以先对第三方包处理然后在打包
  webpack.dll.js

  
  Webpack

image.png

• Happypack
  js是单线程，node是可以开webWork
  利用node的webWork多线程处理文件，代替babel-loader处理js，一般根据CPU核数来决定开几个线程

  
  image.png

Webpack Webpack

---

解决方案归纳

• loader 对某一种类型（js\css\图片\视频）文件的内容进行处理

• plugin 增加一些特殊的功能
  在apply对打包的某个周期进行监听
  done 打包完成，dist目录已经形成
  emit