捆绑非JavaScript文件 - Webpack 5指南

webpack5指南（二）：如何打包非JavaScript文件？

概述

Webpack 5 是一种广泛采用的模块化打包器，用于在 Web 开发过程中捆绑和加载应用程序中的所有文件。它最常用于捆绑和加载前端应用程序中的JavaScript文件。但是，它也可以用于加载和捆绑许多类型的非JavaScript文件，如：

• 图像（例如：.png、.jpg）
• 文本文件（例如：.txt、.html）
• 数据文件（例如：.json、.csv）

为非JavaScript文件启用 webpack

要为非JavaScript文件启用 webpack，你需要：

1. 安装 file-loader webpack 加载器：

yarn add file-loader --dev

2. 配置 file-loader 加载器：
   在 webpack 配置文件 (例如： webpack.config.js ) 中：

module.exports = {
  module: {
    // webpack 5 及更高版本
    module.rule({
      test: /\.(png|jpg|jpeg)$/,
      loader: 'file-loader',
    }),
  },
};

3. 调整该 file-loader 加载器以符合您的需要（例如，为文件生成哈希）：

module.exports = {
  module: {
    module.rule({
      test: /\.(png|jpg|jpeg)$/,
      loader: 'file-loader',
      options: {
        name: '[name].[ext]'
      },
    }),
  },
};

为非JavaScript文件加载指定输出路径

你可以使用 output.path 配置选项为非JavaScript文件指定输出路径：

module.exports = {
  // 其他 webpack 配置
  output: {
    // webpack 5 及更高版本
    path: path.resolve(__PROJECT_DIRECTORY, 'dist/images')
  }
};

其他用例

导入文本文件

import rawContent from 'raw-loader!./test.txt';

导入数据文件

import data from 'json-loader!./data.json';

导入css文件

import './styles.css'

结论

使用 webpack 5 捆绑非JavaScript文件可以让你在 Web 开发过程中更好地管理和加载应用程序中的所有文件。它简化了工作流程，确保应用程序的平稳运行。