gpt4 book ai didi

javascript - 使用 Webpack HtmlWebpackPlugin

转载 作者:行者123 更新时间:2023-12-03 03:30:15 26 4
gpt4 key购买 nike

我对 webpack 和其他东西非常陌生,我需要一个解决方案来分离 index.htmlbase href src >bundle.js,用于开发和生产,因为两者是不同的。

为了发展

基本 href = 本地主机

src =/bundle.js

用于生产

基本 href = 服务器网址

src =/dist/bundle.js

为了解决上述问题,我尝试使用HtmlWebpackPlugin,以下是webpack.config.js设置

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname + "/dist",
publicPath: '/',
filename: 'bundle.js'
},
module: {
rules: [
{
exclude: /node_modules/,
use:[
{
loader: 'babel-loader',
options:{
presets: ['react', 'es2015', 'stage-1']
}
},
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new HtmlWebpackPlugin({
template:'index.html',
inject:'head',
hash: true,
baseHref: 'http://localhost:8030/'
})
]
};

以下是我尝试在 index.html

中使用 baseHref 的方式
<html>
<head>
<% if (htmlWebpackPlugin.options.baseHref) { %>
<base href="<%= htmlWebpackPlugin.options.baseHref %>">
<% } %>

/*
Several css are defined with relative path here
*/
</head>
<body>
<div class="container-fluid"></div>
</body>
<script src="/bundle.js"></script>
</html>

我使用上述设置收到以下错误

enter image description here

我需要帮助才能知道我在这里做错了什么?

任何帮助将不胜感激。

谢谢。

最佳答案

HtmlWebpackPlugin 的主要目的是识别您的入口文件并将它们放置到适当的位置(dist/index.html)。所以您不需要手动执行此操作。

如果您没有 HtmlWebpackPlugin,您应该记住您在应用程序中使用的每个文件,并将它们手动添加到 index.html 中。

关于javascript - 使用 Webpack HtmlWebpackPlugin,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46134132/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com