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配置文件中添加如下配置：

   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忽略这些外部依赖：

   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文件：

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请求。

配置示例：

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项目中整合并处理非模块化文件，从而保持项目的结构清晰与构建过程的顺畅。