Webpack设置及工作流程
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企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]