为file loader的name选项指定主机名导致编译失败

嗨，我之前遇到过类似的webpack构建卡住的问题，正好和你这个配置带外部域名的file-loader情况匹配，来给你梳理下问题和解决办法：

当你在webpack 3.8.1的生产配置里添加了带有完整外部URL的file-loader规则后，构建进程卡在Creating an optimized production build...这一步，控制台输出如下：

npm run build > typescript-sass-modules@0.1.0 build C:\Users\cypri\projets\typescript-sass-modules-boilerplate > node scripts/build.js
Creating an optimized production build...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
ts-loader: Using typescript@2.8.1 and C:\Users\cypri\projets\typescript-sass-modules-boilerplate\tsconfig.json
No valid rules have been specified

复现步骤 #

• 在webpack.config.prod.js中添加这段file-loader配置：

{ 
  loader: require.resolve('file-loader'),
  exclude: [/\.js$/, /\.html$/, /\.json$/],
  options: { 
    name: 'http://test-vad/build/static/media/[name].[hash:8].[ext]' 
  }
},

预期效果 #

构建能正常完成，所有资源文件的URL自动带上指定的主机名http://test-vad/build/static/media/。

补充说明 #

移除主机名后构建就能正常运行，另外No valid rules have been specified这个错误是无关的——正常构建时也会出现它，不用管。

环境信息 #

• webpack版本：3.8.1
• Node.js版本：8.11.2
• 操作系统：Windows 10

1. 用output.publicPath配置资源前缀（推荐） #

webpack里专门有output.publicPath字段来设置资源的公共路径前缀，别把完整URL写在file-loader的name选项里，这才是正确的姿势。修改配置如下：

首先在webpack配置的output部分加上publicPath：

output: {
  // 保留你原来的其他配置，比如filename、path等
  publicPath: 'http://test-vad/build/static/media/'
}

然后把file-loader的name改成只保留文件名规则：

{ 
  loader: require.resolve('file-loader'),
  exclude: [/\.js$/, /\.html$/, /\.json$/],
  options: { 
    name: '[name].[hash:8].[ext]' 
  }
},

这样webpack会自动把publicPath的前缀加到所有资源URL上，既满足你的需求，又不会让构建卡住。

2. 适配file-loader的版本 #

webpack 3.8.1和过高版本的file-loader可能存在兼容性问题，建议安装适配的3.x版本：

npm install file-loader@3.0.1 --save-dev

3. 为什么不能直接在name里写绝对URL？ #

在webpack 3.x中，file-loader的name如果设成完整的HTTP URL，webpack会误以为要去处理远程路径的资源，而不是本地的文件，这就导致构建流程卡住了。而output.publicPath是webpack专门用来配置资源发布路径的，它会正确处理这个前缀，不会影响本地文件的编译流程。

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