-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頁面。