一、webpack工作流程:
- 初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数;
- 开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译;
- 确定入口:根据配置中的 entry 找出所有的入口文件;
- 编译模块:从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;
- 完成模块编译:在经过第4步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系;
- 输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会;
- 输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。
二、Loader:
一个 Loader 其实就是一个 Node.js 模块,这个模块需要导出一个函数。 这个导出的函数的工作就是获得处理前的原内容,对原内容执行处理后,返回处理后的内容。
loader: 'eslint-loader', // 语法规则和代码风格的检查工具
loader: 'babel-loader', // Babel是一个JavaScript编译器,能够让我们放心的使用新一代JS语法。
loader: 'url-loader', // 为了减少请求,我们可以通过base64编码的方法来展示图片,url-loader就是用来处理这个的
loader: 'file-loader', // 处理文件
-
'style-loader', // 将css-loader解析后的内容挂载到html页面当中
-
'css-loader', // 解析css代码中的url、@import语法像import和require一样去处理css里面引入的模块,将css文件打包到js中
-
'less-loader', // 将Less转化为css
-
postcss-loader // 自动添加前缀
三、Plugin:
在 Webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。
HtmlWebpackPlugin://打包后自动生成index.html文件,并把打包生成的js自动引入到这个html文件中
CleanWebpackPlugin://每次打包之前都会自动将dist文件中的内容删除
HotModuleReplacementPlugin://热更新
四、优化构建速度:
1、缩小文件的搜索范围:设置resolve.modules:[path.resolve(__dirname, 'node_modules')]
避免层层查找。
配置loader时,通过test、exclude、include缩小搜索范围
2、使用DllPlugin减少基础模块编译次数:其原理是把网页依赖的基础模块抽离出来打包到dll文件中,当需要导入的模块存在于某个dll中时,这个模块不再被打包,而是去dll中获取。
3、使用HappyPack开启多进程Loader转换
4、使用ParallelUglifyPlugin开启多进程压缩JS文件
五、HMR:
- watch 编译过程、devServer 推送更新消息到浏览器
- 浏览器接收到服务端消息做出响应
- 对模块进行热更新或刷新页面
https://segmentfault.com/a/1190000015088834#item-5
https://juejin.im/post/5b652b036fb9a04fa01d616b#heading-9