Webpack 5中使用图片是否必须在index.js中导入？

问题描述 #

我正在学习Webpack 5配置教程，不确定图片处理方式是否正确。目前只有在index.js中导入图片（如import f1 from './assets/f1.jpeg'）后，template.html里的<img src="f1.jpeg" />才能正常渲染，不导入则无法显示。想确认这是否是正确的工作方式，还是我遗漏了配置？

我的Webpack配置 #

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  mode: 'development',
  entry: {
    bundle: path.resolve(__dirname, 'src/index.js'),
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name][contenthash].js',
    clean: true,
    assetModuleFilename: '[name][ext]',
  },
  devtool: 'source-map',
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'dist'),
    },
    port: 3000,
    open: true,
    hot: true,
    compress: true,
    historyApiFallback: true,
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack App',
      filename: 'index.html',
       template: 'src/template.html',
    }),
    new BundleAnalyzerPlugin(),
  ],
}

文件夹结构 #

• 项目根目录
  • src/
    • assets/（存放图片等静态资源）
      • f1.jpeg
    • index.js（入口文件）
    • template.html（HTML模板）
  • dist/（打包输出目录）
  • webpack.config.js（Webpack配置文件）
  • package.json

解答 #

你当前的做法是符合Webpack默认资源处理逻辑的，但不是唯一的处理方式。

Webpack是模块打包工具，只有被入口文件（或入口依赖的模块）引用的资源，才会被纳入依赖图谱并打包到dist目录。你通过import导入图片，相当于告诉Webpack这个资源需要处理，它才会把图片复制到dist文件夹，此时template.html里的路径才能匹配到打包后的文件。

如果不想手动在JS里导入每一张图片，可以用以下两种方案优化：

方案1：用html-loader自动解析HTML中的图片 #

1. 安装依赖：

npm install html-loader --save-dev

2. 在Webpack配置的module.rules中添加规则：

{
  test: /\.html$/i,
  loader: 'html-loader',
}

之后在template.html里写图片的相对路径（相对于src目录）：<img src="./assets/f1.jpeg" />，Webpack会自动识别这个图片，将其打包到dist，并替换HTML里的src为正确的打包后路径。

方案2：用copy-webpack-plugin复制整个静态资源目录 #

如果有大量静态资源不需要Webpack处理，可以直接复制整个文件夹：

1. 安装插件：

npm install copy-webpack-plugin --save-dev

2. 在配置中导入并使用：

const CopyPlugin = require('copy-webpack-plugin');

// 加入plugins数组中
new CopyPlugin({
  patterns: [
    { from: 'src/assets', to: 'assets' }, // 把src/assets复制到dist/assets
  ],
})

此时template.html里的图片路径要写成：<img src="assets/f1.jpeg" />，因为assets文件夹会完整复制到dist目录下。

内容的提问来源于stack exchange，提问作者oladimeji