[英]how to change the path in the build folder of index.html file using webpack?
当我运行npm run build时，我也在获取 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'
})
]
}
我使用过"homepage": "./",在 package.json 中它也对我有用
您可以将其添加到您的.env文件中：
PUBLIC_URL='./'
Webpack - 在 index.html 中更改 javascript 文件的“src”路径
[英]Webpack - Change 'src' path of javascript files in index.html
如何使用HTML Webpack插件将文件加载器所需的CSS文件包含到index.html中
[英]how to include css file required with file loader into index.html using html webpack plugin
如何在使用 Nginx 服务器发送每个请求之前修改 build 文件夹中的 index.html 文件？
[英]How to modify index.html file in build folder before sending it on each request with Nginx server?
使用 Webpack 5 将 `html/index.pug` 构建到 `dist/index.html`
[英]Build `html/index.pug` into `dist/index.html` using Webpack 5
Webpack 构建后未加载 index.html 中的应用程序，build.js 文件中没有代码
[英]Webpack isn't loading the app in index.html after build , no code in the build.js file
使用webpack-dev-server时，html-webpack-plugin不会将js文件注入index.html
[英]html-webpack-plugin not inject js file into index.html when using webpack-dev-server
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.