ToB企服应用市场:ToB评测及商务社交产业平台

标题: Webpack设置及工作流程 [打印本页]

作者: 万有斥力 时间: 2024-7-12 06:29
标题: 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企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

	const path = require('path');

	module.exports = {
	entry: './src/index.js',
	output: {
	filename: 'bundle.js',
	path: path.resolve(__dirname, 'dist'),
	},
	};

	module: {
	rules: [
	{
	test: /\.css$/,
	use: ['style-loader', 'css-loader'],
	},
	// 其他Loader设置...
	],
	},

	const HtmlWebpackPlugin = require('html-webpack-plugin');

	module.exports = {
	// ...
	plugins: [
	new HtmlWebpackPlugin({
	template: './src/index.html',
	}),
	// 其他插件设置...
	],
	};

	"scripts": {
	"build": "webpack --mode production"
	}