Webpack Module Bundler 简介

Webpack： Webpack 是用于 JavaScript 应用程序的静态模块捆绑器。由于 webpack 只理解 JavaScript 和 JSON 文件，如果包含相应的加载器，它会将 HTML、CSS 和图像等前端资产转换为有效的模块。在处理您的应用程序时，webpack 在内部构建一个依赖关系图，该图映射您项目所需的每个模块并生成一个或多个输出包。

webpack 的一些核心概念是：

入口
输出
装载机
插件
模式

入口：入口点定义了 webpack 应该使用哪个模块来开始构建其内部依赖图。入口点的默认值为./src/index.js ，但在 webpack 配置中，您可以通过在此文件中设置入口属性来指定不同或多个入口点。

让我们考虑一个示例，其中GeeksForGeeks目录中的 file.js 是入口点。那么 webpack.config.js 文件应该如下：

文件名：webpack.config.js

module.exports = {
 entry: './GeeksForGeeks/file.js'
};

输出：输出属性指示 webpack 在哪里发出它创建的包，并告诉如何命名这些文件。默认情况下，它的值是./dist/main.js用于主输出文件，它是./dist文件夹用于任何其他生成的文件，但我们可以通过在配置中指定输出字段来更改这部分过程。

文件名：webpack.config.js

const path = require('path');
module.exports = {
 entry: './GeeksForGeeks/file.js',
 output: {
   path: path.resolve(__dirname, 'gfg'),
   filename: 'GeeksForGeeks-webpack.bundle.js'
 }
};

Loaders：因为 webpack 只理解 JavaScript 和 JSON 文件。加载器处理其他类型的文件，然后将它们转换为我们的应用程序可以使用的有效模块，并将它们添加到依赖关系图中。

加载器将其他类型的文件预处理到包中，加载器在 webpack 配置中有两个属性，它们通过它们实现这一点：

测试属性
使用属性

测试属性：它用于识别哪个或哪些文件应该由相应的加载器转换。通常，正则表达式用于标识应转换的文件。

use 属性：用于指示应该使用哪个加载器进行转换。

文件名：webpack.config.js

const path = require('path');
module.exports = {
 output: {
   filename: 'GeeksForGeeks-webpack.bundle.js'
 },
 module: {
   rules: [
     { test: /\.txt$/, use: 'raw-loader' }
   ]
 }
};

上面的 webpack 配置为一个模块定义了一个规则属性，其中包含两个必需的属性，即test和use 。当 webpack 编译器在 require()/import 语句中遇到解析为 '.txt' 文件的路径时，它将使用 raw-loader 对其进行转换，然后再将其添加到包中。

插件：虽然加载器用于预处理某些类型的模块，但插件可用于执行更广泛的任务，例如注入环境变量、资产管理和包优化。

为了使用插件，我们必须 require() 并将其添加到 plugins 数组中。插件可以通过选项进行定制。由于一个插件可以在一个配置中多次用于不同的目的，我们需要通过使用 new运算符调用它来创建它的一个实例。

文件名：webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
 module: {
   rules: [
     { test: /\.txt$/, use: 'raw-loader' }
   ]
 },
 plugins: [
   new HtmlWebpackPlugin({template: './src/GeeksForGeeks.html'})
 ]
};

在上面的示例中， html-webpack-plugin用于通过自动注入所有生成的包来为我们的应用程序生成 HTML 文件。

Mode：我们可以通过将 mode 参数设置为 development、production 或 none 来启用与每个环境对应的 webpack 的内置优化。它的默认值是生产。

文件名：webpack.config.js

module.exports = {
 mode: 'development'
}