Webpack 5如何禁用静态资源复制到构建目录并保留原有引用路径？

你遇到的配置不生效问题核心有两个原因：

1. Webpack 5 新增了内置的Asset Modules资源处理能力，默认会匹配png、字体等资源类型进行打包输出，和你配置的file-loader产生了叠加处理，才会出现内容是JS导出路径的错误资源文件
2. css-loader默认开启了url路径解析，会把CSS中引用的静态资源识别为Webpack的依赖模块，触发后续的打包逻辑

具体修改步骤 #

第一步：关闭所有CSS相关loader的URL解析能力 #

找到webpack.config.js中所有用到css-loader的规则，给css-loader添加url: false配置，让它不处理CSS中的url路径：

// 修改styl规则
{
  test: /\.styl$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: { url: false }
    },
    'stylus-loader'
  ]
},
// 修改普通css规则
{
  test: /\.css$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: { url: false }
    }
  ]
},
// 修改scss规则
{
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: { url: false }
    },
    'sass-loader'
  ],
},
// 修改sass规则
{
  test: /\.sass$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: { url: false }
    },
    'sass-loader?indentedSyntax'
  ],
},
// 修改vue-loader配置中的css相关规则
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      'scss': [
        'vue-style-loader',
        {
          loader: 'css-loader',
          options: { url: false }
        },
        'sass-loader'
      ],
      'sass': [
        'vue-style-loader',
        {
          loader: 'css-loader',
          options: { url: false }
        },
        'sass-loader?indentedSyntax'
      ]
    }
  }
},

第二步：调整静态资源规则，避免和Webpack内置Asset Modules冲突 #

给你现有的静态资源匹配规则添加type: 'javascript/auto'，告诉Webpack不要用内置的资源模块处理该类文件，完全走你配置的file-loader逻辑，同时可以删除test里重复的gif匹配项：

{
  test: /\.(png|svg|jpg|jpeg|gif|woff|woff2|eot|ttf|otf)$/,
  type: 'javascript/auto', // 新增这行配置
  loader: 'file-loader',
  options:{
    emitFile: false,
    name: '[name].[ext]'
  }
}

修改完成后重新编译，Webpack就不会生成额外的静态资源文件，CSS中的原始/static/xxx路径也会完全保留，和Webpack 2的行为完全一致。

内容的提问来源于stack exchange，提问作者Профіль заблоковано