添加到我的 index.html 文件的 Webpack Babel 脚本需要 src="/main.js" 但 src="main.js"。我怎样才能正确配置这个？

Question

我是 babel 和 webpack 的新手，似乎无法理解这一点。我知道 babel loader 或 webpack 将此脚本注入到我的输出 html 文件中。

<script defer src="main.js"></script>

我需要它来阅读

<script defer src="/main.js"></script>

.babelrc 文件：

{"presets": ["@babel/preset-env", "@babel/preset-react"]}

webpack.config.js:

   const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html"
});
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, 'dist'),
    filename: "[name].js"
  },
  plugins: [htmlPlugin],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {loader: "babel-loader"}
      },
      {
      test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i, 
        loader: 'file-loader',
        options: {
          name: '/src/img/[name].[ext]'
        }
      }  
    ]
  }
};

我可以继续手动进行此更改，但更希望 webpack/babel 正确输出它。到目前为止，我已经花了很多时间研究它，但没能把它挖掘出来。在此先感谢您的帮助。

编辑我已将条目更改为

entry: { 
    //path: path.join(__dirname, 'dist'),
    main: "/dist/main.js",
  },

现在我的 HTML 读取

<script defer src="./dist/main.js"></script>

但只有当我删除 .

时一切正常

<script defer src="/dist/main.js"></script>

这让我抓狂。

编辑我正在放弃这个 - 我认为那里必须有一个答案所以我会注意以防万一有人拥有它......我刚刚将脚本写入我的模板 html 目前完成了工作.

Answer 1

您需要设置 publicPath

示例：

const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html",
  publicPath: "/"
});

添加到我的 index.html 文件的 Webpack Babel 脚本需要 src="/main.js" 但 src="main.js"。我怎样才能正确配置这个？

Webpack Babel script added to my index.html file needs to be src="/main.js" but is src="main.js". How can I configure this correctly?

javascript

reactjs

webpack

babel-loader