Webpack 基本介绍

介绍

什么是 Webpack？

Webpack 如何提供帮助？

安装 Webpack

配置文件

运行 Webpack

Webpack 开发服务器

结论

介绍

在本文中，我将以实用易懂的方式介绍 Webpack 的核心概念。我将讲解如何从头开始设置 Webpack 配置文件，以及入口点、CSS、加载器、插件等每个配置的含义。

许多人可能没有意识到，当你使用 angular-cli 或 create-react-app 引导 Angular 或 React 项目时，Webpack 就在后台运行。

我写这篇文章是为了跟进。你可以从Github 仓库获取文中描述的 webpack starter 的完整代码。

什么是 Webpack？

Webpack 是一个用于现代 JavaScript 应用程序的静态模块打包器。当 Webpack 处理你的应用程序时，它会在内部构建一个依赖关系图，该图会映射项目所需的每个模块，并生成一个或多个打包文件。

下面的插图可以更简单地解释 Webpack 实际的作用。

Webpack 如何提供帮助？

让我们以任意 Web 应用程序为例。它通常包含一个 index.html 文件，其中包含许多脚本标签，如下所示。

<body>

  ...

  <script src='src/blog.js'></script>
  <script src='src/about.js'></script>
  <script src='src/contact.js'></script>
  <script src='src/index.js'></script>
</body>

虽然上述在 HTML 页面中包含脚本标签的方式有效，但它也带来了一些挑战，例如：

脚本标签需要按特定顺序加载。这是必要的，这样，引用其他脚本中函数的脚本会先于自身加载。在上面的例子中，about.js、contact.js 和 blog.js 必须在 index.js 之前加载到浏览器中，因为 index.js 很可能引用了其他脚本中的函数。
此外，上述方法容易出现拼写错误。

Webpack 恰恰解决了这个问题，通过使用捆绑器，您不必担心在 index.html 中包含每个脚本标签，当然也不必担心顺序。

<body>

  ...

  <script src='dist/index_bundle.js'></script>
</body>

模块打包只是 Webpack 解决的一个方面。但是，它在将 HTML、CSS 和 JS 文件引入打包器之前进行转换的能力无疑要强大得多。让我们直接开始学习如何安装和设置 Webpack。

安装 Webpack

首先，您需要安装以下两个包才能使用 Webpack。

//Create a new folder
$ mkdir webpack-example

//Initialize a new NPM projects (Creates a package.json with default values)
> webpack-example$npm init -y

//Include the packages webpack and webpack-cli as dev dependencies
> webpack-example$npm install webpack webpack-cli --save-dev

注意事项：

如果您想继续操作，请创建一个新文件夹。打开终端，进入新文件夹并运行上述命令。
选项“—save-dev”会将软件包作为 dev 依赖项添加到你的 package.json 中。这意味着这些软件包不会包含在你的最终生产版本中。

配置文件

webpack.config.js 文件是大多数操作发生的主要位置。在这里，您将向“Webpack”提供一组指令，让它知道如何处理您的项目文件，以及如何以您希望使用的方式打包它们。

注意：根据 Webpack 官方文档，从 Webpack 4.0.0 开始，你无需配置文件即可设置打包器。然而，配置文件可能是 Webpack 中最重要的部分，你需要根据项目需求进行自定义。

我们将介绍配置文件的以下核心概念：

入口
装载机
输出
插件
模式

在我们开始研究概念之前，首先在项目的根结构中创建 webpack.config.js。

> webpack-example$ touch webpack.config.js

Webpack 按指定顺序执行以下操作：

如何找到需要打包的文件？或者如何选择应用转换？
访问这些文件后我需要做什么？我需要进行任何特定的转换吗？
我需要将我生成的捆绑包输出（保存）到哪里？

入口点

启动一切的单个文件通常是 Webpack 的入口点。它通常是“index.js”或“app.js”。

您可以将下面显示的导入结构可视化，就像 Webpack 如何创建依赖关系图一样。

index.js
  imports about.js
  imports contact.js
  imports blog.js
    imports util.js
    imports api.js

让我们在应用程序文件夹中创建“index.js”。

> webpack-example$ mkdir app

> webpack-example$ cd app

> webpack-example$ touch index.js

让我们将入口点添加到 webpack.config.js

module.exports {
    entry: './app/index.js'
}

装载机

现在我们已经设置了入口点，接下来要告诉 Webpack 应该如何处理项目中的文件。换句话说，需要对我们的文件应用什么样的转换。

为此，我们引入了一个叫做“加载器”的东西。默认情况下，Webpack 会查看所有 JSON 和 JS 文件来构建如上所示的依赖关系图。

import contact from './app/config' // 👍
import config from './utils/config.json' // 👍
import './css/app.css' // ❌

在上面的例子中，CSS 导入会被 Webpack 忽略，而 Loaders 正是我们在这里所需要的，它可以协助 Webpack 处理除 JS 和 JSON 之外的文件。

让我们看看如何按照以下步骤添加 CSS 加载器。

> webpack-example$ npm install css-loader --save-dev

我们需要在“modules.rules”属性数组中添加加载器。Webpack 将查找规则数组，以确定加载器的设置以及每种文件类型的相关规则。

module.exports = {
  entry: './app/index.js',
  module: {
    rules: []
  }
}

我们需要在规则数组中指定加载器属性。每个加载器都有两个需要定义的属性：

use——加载器的名称。
测试——匹配文件路径的正则表达式。

module.exports = {
  entry: './app/index.js',
  module: {
    rules: [
      { test: /\\.css$/, use: 'css-loader' }
    ]
  }
}

现在，如果我们在项目中的任何地方使用 CSS，Webpack 都会通过加载器识别它，并将其导入到项目中。基本上，上面那个带有 ❌ 的 CSS 导入语句现在会变成 👍。

import contact from './app/config' // 👍
import config from './utils/config.json' // 👍
import './css/app.css' // 👍

DOM注入

虽然我们已经成功使用 webpack 配置导入了 CSS 文件，但还有一件事要做。我们需要将样式元素注入到 DOM 中。

简单来说，CSS 样式需要作为“样式”标签包含在 HTML 中。

为了帮助我们实现这一点，我们需要使用“style-loader”。

> webpack-example$ npm install style-loader --save-dev

并修改 webpack.config.js 以将 'style-loader' 添加到 modules.rule 数组中。

module.exports = {
  entry: './app/index.js',
  module: {
    rules: [
      { test: /\\.css$/, use: [ 'style-loader', 'css-loader' ] }
    ]
  }
}

注意事项：

由于“use”属性中需要使用 2 个变量，我们将其更改为数组。
加载器的引用顺序很重要，因为 webpack 会以相反的顺序处理它们。因此，css-loader 会先解释 import 命令，然后 style-loader 会将 CSS 注入到 DOM 中。

加载器可以做的事情还有很多，一个很常见的例子就是使用 Babel。Babel 根据 webpack.config.js 中指定的配置，将每个 JavaScript 文件转换为适当的 ES 语法。

您可以在此处查看完整的加载器列表。

输出

顾名思义，这个配置参数只是告诉 Webpack 在哪里输出它创建的包。

//Import 'path' to resolve the file path
const path = require('path');

//Add this configuration after module.rules config
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
}

注意事项：

我们正在导入“路径”包来帮助解析文件路径。
输出配置需要 path 参数来告知 webpack 打包文件的保存位置。此外，使用 filename 参数可以指定生成的打包文件的名称。

快速回顾

到目前为止，我们已经了解了入口、加载器和输出配置。组合所有配置后，webpack.config.js 如下所示：

//Import 'path' to resolve the file path
const path = require('path')

module.exports = {
  entry: './app/index.js',
  module: {
    rules: [
      { test: /\\.css$/, use: [ 'style-loader', 'css-loader' ] }
    ]
  },
    output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  }
}

快速回顾：

Webpack 找到位于的入口点 ./app/index.js。
它检查项目中的所有 import 和语句并创建依赖关系图。require
然后它开始创建一个包，每当它遇到我们有加载器的路径时，它就会根据该加载器转换代码，然后将其添加到包中。
最后，它将其捆绑并输出到配置中提到的位置，即 dist/index_bundle.js。

希望您能跟上到这里。我们还有两个配置“插件”和“模式”需要介绍。所以，请耐心等待，我们很快就完成了。

插件

虽然加载器用于转换某些类型的模块，但插件可以用来执行更广泛的任务，如捆绑优化、资产管理和环境变量注入。

插件允许你在创建 bundle 后执行某些任务。因此，这些任务可以放在 bundle 本身，也可以直接应用到源代码库中。

让我们看两个这样的插件的例子：

HtmlWebpack插件

之前我们看到，webpack 的主要好处是它会为我们生成一个单独的包，然后我们可以在主页中引用它 index.html 。

它的作用 HtmlWebpackPlugin 是，为我们生成页面，将 index.html 其粘贴到放置捆绑包的同一目录中，并自动包含 <script> 引用新生成的捆绑包的标签。

与往常一样，第一步是从 npm 下载插件。

> webpack-example$ npm install html-webpack-plugin --save-dev

接下来，我们向 webpack 配置中添加一个 plugins 属性，它是一个数组。

//Import the HtmlWebpackPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin')

//Add this to the module.exports configuration
plugins: [
    new HtmlWebpackPlugin()
]

现在你的整个 webpack.config.js 将如下所示：

//Import 'path' to resolve the file path
const path = require('path')

//Import the HtmlWebpackPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './app/index.js',
  module: {
    rules: [
      { test: /\\.css$/, use: [ 'style-loader', 'css-loader' ] }
    ]
  },
    output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  },
    plugins: [
    new HtmlWebpackPlugin()
    ]
}

HtmlWebpackPlugin 是最基本的插件之一，您可以在这里查看 Webpack 提供的其他插件。

MiniCssExtract插件

MiniCssExtractPlugin 是我们将要介绍的第二个插件示例。如果您还记得之前的示例，我们使用了 Style-loader，但使用这个插件，我们可以完全分离 CSS 文件，而不是仅仅插入 CSS 的样式元素。

与往常一样，我们将从安装依赖项作为第一步开始：

> webpack-example$ npm install --save-dev mini-css-extract-plugin

将以下内容添加到 webpack.config.js 文件：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

plugins: [
  new MiniCssExtractPlugin(),
],

最后但并非最不重要的一点是，我们将用 MiniCssExtractPlugin.loader 替换 style-loader：

{
  test: /\\.css$/,
  use: [
    MiniCssExtractPlugin.loader, // instead of style-loader
    'css-loader'
  ]
}

现在，当您运行 webpack 时，它将在 dist 文件夹中输出 main.css 文件，并将使用链接头从 index.html 文件引用。

模式

使用 mode 参数，您可以根据值“development”、“production”或“none”启用 webpack 的内置优化。默认值为“production”。

mode: 'production' //Other values include 'development' or 'none'

当模式设置为“生产”时，Webpack 会执行构建优化的一个例子是，它会压缩代码并删除警告。有关后台运行的详细优化列表，您可以在此处阅读。

运行 Webpack

如果你一直跟着做，那么此时你的 webpack.config.js 应该如下所示：

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

module.exports = {
  entry: './app/index.js',
  module: {
    rules: [{ test: /\\.css$/, use: ['style-loader', 'css-loader'] }],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'production',
};

现在让我们继续运行 Webpack。首先，我们需要在 package.json 中添加以下配置。

"scripts": {
    "build": "webpack"
}

现在从命令终端运行以下命令。

> webpack-example$ npm run build

Webpack 将执行并创建一个名为 index_bundle.js 的优化包并将其放入 dist 目录中。

您应该会看到在“dist”文件夹中创建的最终的index.html。

Webpack 开发服务器

Webpack DevServer 是 webpack 的开发服务器，它会在内存中跟踪您的文件并通过本地服务器提供它们，而不是生成 dist 目录。

但最棒的是，它支持实时重新加载。这意味着，无论何时你修改代码，webpack-dev-server 都会快速重新编译代码，并使用这些更改重新加载浏览器。

我们需要从 npm 安装该包。

> webpack-example$ npm install webpack-dev-server --save-dev

然后我们需要更新 package.json 中的“scripts”属性来运行 webpack-dev-server。

"scripts": {
  "start": "webpack-dev-server"
}

此外，如果环境变量中未指定“production”，我们将对 webpack.config.js 中的“mode”参数进行小幅更改，默认为“development”。

mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'

//If you’re on Windows, then the command is as follows:
"SET NODE_ENV='production' && webpack"

就是这样！如果你从终端运行“npm start”，那么你的项目将在http://localhost:8080上提供服务。

> webpack-example$ npm start

经过定制的完整项目可在以下Github 存储库中找到。

结论

虽然这篇文章很长，但说实话，我们仅仅触及了 Webpack 的表面以及它所支持的配置的无限可能性。

总而言之，我们在本文中涵盖了以下内容：

什么是 Webpack 以及它提供什么好处？
Webpack 的核心组件：
- 入口点
- 装载机
- 输出
- 插件
- 模式
运行 Webpack - 本地和生产模式

希望这篇文章对您有所帮助。如果您觉得我的文章有趣，请不要忘记订阅我的新闻通讯。

您可能还感兴趣：

文章来源：https://dev.to/skaytech/a-basic-introduction-to-webpack-4eke

Webpack 基础介绍 简介 Webpack 是什么？Webpack 有什么用？安装 Webpack 配置文件 运行 Webpack Webpack DevServer 总结

Webpack 基本介绍

介绍

什么是 Webpack？

Webpack 如何提供帮助？

安装 Webpack

配置文件

运行 Webpack

Webpack 开发服务器

结论

介绍

什么是 Webpack？

Webpack 如何提供帮助？

安装 Webpack

配置文件

入口点

装载机

DOM注入

输出

快速回顾

插件

HtmlWebpack插件

MiniCssExtract插件

模式

运行 Webpack

Webpack 开发服务器

结论

您可能还感兴趣：

Webpack 基础介绍简介 Webpack 是什么？Webpack 有什么用？安装 Webpack 配置文件运行 Webpack Webpack DevServer 总结