Webpack publicPath 不起作用答案

【问题标题】：Webpack publicPath don't workWebpack publicPath 不起作用
【发布时间】：2017-08-07 02:20:54
【问题描述】：

我有一个这样的演示：我的 webpack 配置：

module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js',
    path: './build',
    publicPath: 'http://localhost:3000/'
  },
  module: {
    rules: [{
      test: /static\.html/,
      use: 'file-loader'
    }, {
      test: /\.png/,
      use: 'file-loader?name=[name].[ext]'
    }, {
      test: /\.css/,
      use: 'file-loader?name=[name].[ext]'
    }],
  },
  resolveLoader: {
    modules: ['node_modules'],
  }
}

这是我的条目 app.js：

import './static.html';
import './img.png';
import './index.css';

静态.html：

<!DOCTYPE html>
<html>
<head>
  <title>static</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
  <img src="./img.png">
</body>
</html>

当我运行 npm run build 时，我得到了一个 build 文件夹。我认为 build/static.html 应该是

<img src="http://localhost:3000/img.png"> 
<link href="http://localhost:3000/index.css">

但是，实际上 build/static.html 和 static.html 是一样的。 img 的 src 和 link 的 href 都没有改变。

有人知道为什么吗？

====

我已经知道答案了。 Webpack publicPath 仅适用于输出文件。所以只会替换 bundle.js 中的 url。

webpackHtmlPlugin 不会解决这个问题，因为这个插件会生成一个 html 页面，其中包含一个脚本链接到我不需要的输出 bundle.js。

为了解决这个问题，我写了一个自定义加载器来动态转换文件加载器输出的html页面。

【问题讨论】：

标签： javascript html webpack

【解决方案1】：

file-loader 不会更改文件。如果你想要一个添加了publicPath的html文件，你应该使用html-webpack-plugin。

【讨论】：