2.4.1 非模块化文件-Webpack实战：入门、进阶与调优(上)

当前位置:　首页>> 技术小册>> Webpack实战：入门、进阶与调优(上)

### 2.4.1 非模块化文件：在Webpack中的整合与处理

在Web开发的广阔天地中，Webpack以其强大的模块打包能力著称，极大地简化了前端资源的管理与构建流程。然而，在实际的项目开发中，我们不可避免地会遇到一些非模块化（Non-Modular）文件，如全局JavaScript库、CSS样式表、图片、字体文件等。这些非模块化文件虽然不遵循ES6（或CommonJS、AMD等）的模块化规范，但在项目中同样扮演着不可或缺的角色。本章节将深入探讨如何在Webpack中有效整合与处理这些非模块化文件，以确保项目结构的清晰与构建过程的顺畅。

#### 2.4.1.1 理解非模块化文件

首先，我们需要明确什么是非模块化文件。简单来说，非模块化文件是指那些不遵循现代JavaScript模块化标准（如ES6的`import`/`export`语法）的文件。这些文件可能是传统的全局脚本、CSS文件、图片资源等，它们在Web开发中历史悠久，且由于兼容性、性能优化或特定需求等原因，仍被广泛使用。

非模块化文件的存在，给Webpack这样的现代构建工具带来了挑战，因为Webpack默认以模块化的方式处理文件。但幸运的是，Webpack通过丰富的loader和plugin系统，提供了强大的扩展能力，使得我们能够灵活地处理这些非模块化文件。

#### 2.4.1.2 处理全局JavaScript库

对于全局JavaScript库，如jQuery、Lodash等，它们通常会在全局作用域下暴露一个或多个变量或函数，供其他脚本使用。在Webpack中，我们可以通过几种方式引入这些库：

1. **使用`ProvidePlugin`**：
   Webpack的`ProvidePlugin`可以自动加载模块，而不必到处显式地`require`或`import`它们。这对于全局变量特别有用。例如，要自动加载jQuery，可以在Webpack配置文件中添加如下配置：

```javascript
   const webpack = require('webpack');

module.exports = {
     // 其他配置...
     plugins: [
       new webpack.ProvidePlugin({
         $: 'jquery',
         jQuery: 'jquery',
         'window.jQuery': 'jquery'
       })
     ]
   };
   ```

这样，在项目的任何位置，你都可以直接使用`$`或`jQuery`而无需显式引入。

2. **通过`entry`配置引入**：
   另一种方法是将全局库作为项目的入口点之一，虽然这种方法较少使用，因为它会增加主bundle的大小，但它允许你更精确地控制库的加载时机。

3. **使用CDN和外部链接**：
   对于大型库，有时出于加载性能考虑，可能会选择通过CDN引入。这时，你可以在HTML模板中直接通过`<script>`标签引入，并通过Webpack的`externals`配置告知Webpack忽略这些外部依赖：

```javascript
   module.exports = {
     // 其他配置...
     externals: {
       jquery: 'jQuery'
     }
   };
   ```

这样，Webpack在打包时就会跳过对jQuery的打包，而是假设它在运行时环境中已经可用。

#### 2.4.1.3 加载CSS文件

CSS文件是Web项目中不可或缺的一部分，但它们是典型的非模块化文件。Webpack通过`style-loader`和`css-loader`（以及其他可能的loader，如`sass-loader`、`less-loader`等）的组合，能够处理CSS文件，并将它们打包到最终的bundle中。

- **`css-loader`**：负责解析`@import`和`url()`，就像JavaScript解析`import/require()`一样。
- **`style-loader`**：将`css-loader`处理后的样式动态注入到DOM的`<style>`标签中。

在Webpack配置文件中，你可以这样配置来加载CSS文件：

```javascript
module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
  ]
}
```

#### 2.4.1.4 处理图片与字体文件

图片和字体文件也是Web项目中常见的非模块化资源。Webpack通过`file-loader`和`url-loader`来处理这些文件。

- **`file-loader`**：将文件发送到输出目录，并返回（相对）URL。
- **`url-loader`**：类似于`file-loader`，但能在文件很小的情况下将文件以Base64编码的形式直接内联到代码中，以减少HTTP请求。

配置示例：

```javascript
module: {
  rules: [
    {
      test: /\.(png|svg|jpg|jpeg|gif)$/i,
      type: 'asset/resource',
      // 或使用旧版配置
      // use: [
      //   {
      //     loader: 'file-loader',
      //     options: {
      //       outputPath: 'images/',
      //       name: '[name].[ext]',
      //     },
      //   },
      // ],
    },
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      type: 'asset/resource',
      // 或使用旧版配置
      // use: [
      //   {
      //     loader: 'file-loader',
      //     options: {
      //       outputPath: 'fonts/',
      //       name: '[name].[ext]',
      //     },
      //   },
      // ],
    },
  ]
}
```

注意：从Webpack 5开始，`asset/resource`和`asset/inline`作为内置的资源模块类型被引入，用于替代`file-loader`和`url-loader`的部分功能，使得配置更加简洁。

#### 2.4.1.5 实战案例：整合非模块化资源

假设你正在开发一个需要集成jQuery、Bootstrap（包含CSS和字体文件）、以及一些自定义图片和样式表的Web应用。你可以按照以下步骤在Webpack中整合这些非模块化资源：

1. **安装依赖**：
   使用npm或yarn安装jQuery和Bootstrap。

2. **配置Webpack**：
   - 使用`ProvidePlugin`自动加载jQuery。
   - 配置`css-loader`和`style-loader`以处理Bootstrap的CSS文件。
   - 配置`file-loader`（或`asset/resource`）以处理Bootstrap的字体文件和应用的图片资源。

3. **引入资源**：
   - 在JavaScript文件中，通过`$`或`jQuery`使用jQuery。
   - 在需要的地方通过`import`或`@import`引入Bootstrap的CSS文件。
   - 在HTML模板或CSS文件中通过`url()`函数引用图片和字体资源。

4. **构建项目**：
   运行Webpack构建命令，查看输出目录中的文件，确保所有资源都被正确处理并打包到相应的位置。

通过以上步骤，你可以轻松地在Webpack项目中整合并处理非模块化文件，从而保持项目的结构清晰与构建过程的顺畅。

该分类下的相关小册推荐：

Webpack零基础入门

webpack指南

Webpack实战：入门、进阶与调优(下)

全解webpack前端开发环境定制

Webpack实战：入门、进阶与调优(中)