webpack小知识点

最新推荐文章于 2024-06-07 09:42:56 发布

麦子的小库存

最新推荐文章于 2024-06-07 09:42:56 发布

阅读量280

点赞数

分类专栏： Webpack

原文链接：https://segmentfault.com/a/1190000015088834#item-5

版权

8 篇文章 0 订阅

订阅专栏

一、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：

关注