javascript - 如何使用 webpack 更改 index.html 文件的构建文件夹中的路径?
问题描述
当我运行时,我npm run build
也会获取构建文件夹和 index.html 以及其他文件。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<title>React App</title>
<link href="/static/css/main.5ecd60fb.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>!function (e) { function r(r) { for (var n, p, l = r[0], a = r[1], f = r[2], c = 0, s = []; c < l.length; c++)p = l[c], Object.prototype.hasOwnProperty.call(o, p) && o[p] && s.push(o[p][0]), o[p] = 0; for (n in a) Object.prototype.hasOwnProperty.call(a, n) && (e[n] = a[n]); for (i && i(r); s.length;)s.shift()(); return u.push.apply(u, f || []), t() } function t() { for (var e, r = 0; r < u.length; r++) { for (var t = u[r], n = !0, l = 1; l < t.length; l++) { var a = t[l]; 0 !== o[a] && (n = !1) } n && (u.splice(r--, 1), e = p(p.s = t[0])) } return e } var n = {}, o = { 1: 0 }, u = []; function p(r) { if (n[r]) return n[r].exports; var t = n[r] = { i: r, l: !1, exports: {} }; return e[r].call(t.exports, t, t.exports, p), t.l = !0, t.exports } p.m = e, p.c = n, p.d = function (e, r, t) { p.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t }) }, p.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, p.t = function (e, r) { if (1 & r && (e = p(e)), 8 & r) return e; if (4 & r && "object" == typeof e && e && e.__esModule) return e; var t = Object.create(null); if (p.r(t), Object.defineProperty(t, "default", { enumerable: !0, value: e }), 2 & r && "string" != typeof e) for (var n in e) p.d(t, n, function (r) { return e[r] }.bind(null, n)); return t }, p.n = function (e) { var r = e && e.__esModule ? function () { return e.default } : function () { return e }; return p.d(r, "a", r), r }, p.o = function (e, r) { return Object.prototype.hasOwnProperty.call(e, r) }, p.p = "/"; var l = this["webpackJsonpmy-app"] = this["webpackJsonpmy-app"] || [], a = l.push.bind(l); l.push = r, l = l.slice(); for (var f = 0; f < l.length; f++)r(l[f]); var i = a; t() }([])</script>
<script src="/static/js/2.4b18b928.chunk.js"></script>
<script src="/static/js/main.eab12189.chunk.js"></script>
</body>
</html>
但我希望 src 路径在 index.html 中是这样的。例如,如果 src 路径是 <link href="/static/css/main.5ecd60fb.chunk.css" rel="stylesheet">
但我期望是这样的<link href="./static/css/main.5ecd60fb.chunk.css" rel="stylesheet">
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<title>React App</title>
<link href="./static/css/main.5ecd60fb.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>!function (e) { function r(r) { for (var n, p, l = r[0], a = r[1], f = r[2], c = 0, s = []; c < l.length; c++)p = l[c], Object.prototype.hasOwnProperty.call(o, p) && o[p] && s.push(o[p][0]), o[p] = 0; for (n in a) Object.prototype.hasOwnProperty.call(a, n) && (e[n] = a[n]); for (i && i(r); s.length;)s.shift()(); return u.push.apply(u, f || []), t() } function t() { for (var e, r = 0; r < u.length; r++) { for (var t = u[r], n = !0, l = 1; l < t.length; l++) { var a = t[l]; 0 !== o[a] && (n = !1) } n && (u.splice(r--, 1), e = p(p.s = t[0])) } return e } var n = {}, o = { 1: 0 }, u = []; function p(r) { if (n[r]) return n[r].exports; var t = n[r] = { i: r, l: !1, exports: {} }; return e[r].call(t.exports, t, t.exports, p), t.l = !0, t.exports } p.m = e, p.c = n, p.d = function (e, r, t) { p.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t }) }, p.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, p.t = function (e, r) { if (1 & r && (e = p(e)), 8 & r) return e; if (4 & r && "object" == typeof e && e && e.__esModule) return e; var t = Object.create(null); if (p.r(t), Object.defineProperty(t, "default", { enumerable: !0, value: e }), 2 & r && "string" != typeof e) for (var n in e) p.d(t, n, function (r) { return e[r] }.bind(null, n)); return t }, p.n = function (e) { var r = e && e.__esModule ? function () { return e.default } : function () { return e }; return p.d(r, "a", r), r }, p.o = function (e, r) { return Object.prototype.hasOwnProperty.call(e, r) }, p.p = "/"; var l = this["webpackJsonpmy-app"] = this["webpackJsonpmy-app"] || [], a = l.push.bind(l); l.push = r, l = l.slice(); for (var f = 0; f < l.length; f++)r(l[f]); var i = a; t() }([])</script>
<script src="./static/js/2.4b18b928.chunk.js"></script>
<script src="./static/js/main.eab12189.chunk.js"></script>
</body>
</html>
每当我这样做时,npm run build
我都必须打开 index.html 并手动更改路径。我只是在前面加上'。在路径之前。但我希望这将在使用 webpack 构建自身时完成。
网络包文件:
const HtmlWebPackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.html$/i,
use: [{
loader: 'html-loader',
option: {
minimize: true,
attributes: {
root: '234234',
}
}
}],
}
],
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js'
}
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
})
]
}
解决方案
output.publicPath
应该满足您的需求:
const HtmlWebPackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.html$/i,
use: [{
loader: 'html-loader',
option: {
minimize: true,
attributes: {
root: '234234',
}
}
}],
}
],
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js',
publicPath: './'
}
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
})
]
}
推荐阅读
- python - 使用库 python_anticaptcha 在 Twitter 上解决 CAPTCHA 练习
- r - 如何使用 Flexdashboard 和 Shiny 将 Web 服务中的数据“正确”加载到 Rmarkdown 的仪表板中?
- javascript - React Hook 表单:使 append() 异步
- r - 在 GenomicRanges 包的后续或前面函数中包含重叠范围或基因
- cmake - 使用 CMAKE 将 compile_commands.json 复制到项目根目录
- javascript - Javascript 获取上一页 URL
- c# - c# 油门示例
- sql - 根据where语句中的日期值查询时如何修复SQL错误?
- php - array_push 到一个现有的键
- python - 来自 python 原理的自定义 Zip 练习