-1
我有这样一个演示： 我的WebPack配置：的WebPack publicPath不工作
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';
static.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运行构建，我有一个构建文件夹。我认为build/static.html应该是
<img src="http://localhost:3000/img.png">
<link href="http://localhost:3000/index.css">
但是，实际上build/static.html和static.html是一样的。 img的src和链接的href都没有改变。
任何人都知道为什么？
====
我已经知道了答案。 Webpack publicPath只是用于输出文件。因此，bundle.js中的url将被替换。
webpackHtmlPlugin不会解决这个问题，因为这个插件会生成一个带有脚本链接到输出bundle.js的html页面，我不需要它。
为了解决这个问题，我写了一个自定义的加载程序来动态地转换文件加载器输出的html页面。