Webpack是一个现代JavaScript应用步伐的静态模块打包器（module bundler）。当Webpack处理应用步伐时，它会在内部构建一个依赖图（dependency graph），该图会映射项目所需的每个模块，并天生一个或多个bundle。
基本设置步调
- 安装Webpack和Webpack CLI：
- 使用npm或yarn将Webpack及其命令行接口（CLI）安装为开发依赖。
| npm install --save-dev webpack webpack-cli |
- 创建项目结构：
- 初始化项目（如果尚未初始化），并创建基本的文件和目录结构，如src（源代码）和dist（分发代码）。
- 编写入口文件：
- 在src目录下创建一个或多个JavaScript文件作为Webpack的入口点。
- 创建Webpack设置文件：
- 在项目根目录下创建一个名为webpack.config.js的文件，并设置入口（entry）、出口（output）、模块（module）、插件（plugins）等。
- 设置入口和出口：
- 指定Webpack的入口文件和输出文件。
| const path = require('path'); | | | | module.exports = { | | entry: './src/index.js', | | output: { | | filename: 'bundle.js', | | path: path.resolve(__dirname, 'dist'), | | }, | | }; |
- 设置Loader：
- Loader用于处理非JavaScript文件（如CSS、图片等）。需要在module.rules中设置。
| module: { | | rules: [ | | { | | test: /\.css$/, | | use: ['style-loader', 'css-loader'], | | }, | | // 其他Loader设置... | | ], | | }, |
- 设置Plugin：
- 插件用于执行范围更广的任务，如打包优化、环境变量注入等。
| const HtmlWebpackPlugin = require('html-webpack-plugin'); | | | | module.exports = { | | // ... | | plugins: [ | | new HtmlWebpackPlugin({ | | template: './src/index.html', | | }), | | // 其他插件设置... | | ], | | }; |
- 运行Webpack：
- 在package.json中添加脚本命令，或在命令行中直接运行Webpack进行打包。
| "scripts": { | | "build": "webpack --mode production" | | } |
高级设置点
- 多页应用打包：
- 通过设置多个入口和对应的HtmlWebpackPlugin实例来支持多页应用。
- 环境变量：
- 使用DefinePlugin或环境变量文件（如.env文件）来界说不同环境下的变量。
- 代码分割：
- 使用Webpack的动态导入功能（如import()）和SplitChunksPlugin来分割代码，实现按需加载。
- 构建优化：
- 使用Tree Shaking、代码压缩（如TerserPlugin）、图片压缩（如image-webpack-loader）等策略来优化构建结果。
- 开发服务器：
- 使用Webpack Dev Server来提供一个简单的web服务器，并支持实时重新加载（live reloading）和热模块替换（hot module replacement, HMR）。
工作流程
一、初始化阶段
- 读取设置：Webpack通过读取其设置文件（通常名为webpack.config.js）来确定项目的构建规则和输出。这个文件包含了入口（entry）、出口（output）、模块（module）、插件（plugins）等设置信息。
- 初始化参数：从设置文件和命令行参数中读取并归并参数，得出终极的设置参数。
- 创建Compiler实例：使用这些参数初始化Compiler对象，并加载全部设置的插件。
二、编译阶段
- 确定入口：根据设置中的entry找出全部的入口文件。这些入口文件是Webpack构建依赖图的起点。
- 编译模块：
- 从入口文件出发，Webpack会递归地找出全部依赖的模块。
- 调用全部设置的Loader对模块进行翻译。Loader可以将模块从一种格式转换为另一种格式，比方将ES6代码转换为ES5代码，或将CSS文件转换为JavaScript模块。
- 在这个过程中，Webpack会构建出一个模块依赖图，这个图表现了全部模块之间的依赖关系。
- 完成模块编译：经过Loader翻译后，Webpack得到了每个模块被翻译后的终极内容以及它们之间的依赖关系。
三、输出阶段
- 输出资源：根据入口和模块之间的依赖关系，Webpack将模块组合成一个个包含多个模块的Chunk（代码块）。然后，Webpack将这些Chunk转换成一个或多个文件，并到场到输出列表中。
- 写入文件系统：在确定好输出内容后，Webpack根据设置确定输出的路径和文件名，并将文件内容写入到文件系统中。
四、插件执行
在Webpack的构建过程中，插件可以在特定的时机执行特定的任务。Webpack通过Tapable来构造这条复杂的构建流程，插件只需要监听它所关心的事件，就能在事件发生时执行相应的逻辑。比方，插件可以用于代码压缩、图片压缩、界说环境变量等。
五、总结
Webpack的工作原理可以概括为：通过读取设置文件确定构建规则，递归地构建模块依赖图，使用Loader翻译模块，将模块组合成Chunk并写入文件系统。在这个过程中，插件可以在特定的时机执行特定的任务，以扩展Webpack的功能。Webpack的这种设计使得它非常灵活和强大，可以大概处理各种复杂的构建需求。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
