Webpack多页面应用如何将图片打包至对应页面目录？

你已经搭好了多页面Webpack配置，但图片统一打包到根目录的img文件夹，想让它们跟着各自页面走对吧？我来给你一步步调整配置：

1. 调整Webpack的Output配置 #

首先得让每个页面的JS输出到对应页面的目录下，这样后续资源路径才能正确对应。修改你的output配置：

output: {
  path: path.resolve(__dirname, '../dist'),
  // 让JS文件输出到 [页面名]/js/ 目录下
  filename: '[name]/js/[name].[hash].js',
  // 用相对路径避免资源引用出错，适配多页面目录结构
  publicPath: './'
}

2. 改造url-loader的动态输出路径逻辑 #

原来的name配置是固定的根目录img路径，现在我们需要通过图片的资源路径，动态判断它属于哪个页面，再输出到对应页面的img目录。把options.name改成函数形式：

rules: [
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      // 动态生成输出路径
      name: (resourcePath) => {
        // 从文件路径里匹配出页面名称（比如从../src/pages/index/assets/img/test.png里拿到index）
        const pageMatch = resourcePath.match(/pages\/([^\/]+)\//);
        if (pageMatch) {
          const pageName = pageMatch[1];
          return `${pageName}/img/[name].[hash:7].[ext]`;
        }
        // 兜底：如果是公共图片，还是放到根目录的img文件夹
        return 'img/[name].[hash:7].[ext]';
      }
    }
  }
]

这个函数会读取每个图片的路径，通过正则匹配pages/后面的页面名称，自动把图片输出到dist/[页面名]/img/目录下。

3. 调整HtmlWebpackPlugin配置（如果使用了的话） #

确保每个页面的HTML文件也输出到对应目录，并且正确关联对应的JS和资源：

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

plugins: [
  new HtmlWebpackPlugin({
    // HTML输出到index目录下
    filename: 'index/index.html',
    // 对应页面的模板文件
    template: path.join(__dirname, '../src/pages/index/index.html'),
    // 只引入vendor和index的chunk
    chunks: ['vendor', 'index']
  }),
  new HtmlWebpackPlugin({
    filename: 'page2/page2.html',
    template: path.join(__dirname, '../src/pages/page2/page2.html'),
    chunks: ['vendor', 'page2']
  })
]

配置完成后执行npm run build，你就能得到想要的目录结构：

dist/
├─ index/
│  ├─ js/
│  │  └─ index.[hash].js
│  ├─ img/
│  │  └─ 页面1的图片.[hash:7].png
│  └─ index.html
├─ page2/
│  ├─ js/
│  │  └─ page2.[hash].js
│  ├─ img/
│  │  └─ 页面2的图片.[hash:7].png
│  └─ page2.html
└─ vendor/
   └─ vendor.[hash].js

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