使用 Webpack HtmlWebpackPlugin

Question

我对 webpack 和东西很陌生，我需要一个解决方案来分离 index.html 的 base href 和 src对于 bundle.js，开发和生产是不同的。

发展

base href = localhost

src = /bundle.js

生产用

base href = 服务器 url

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/'
      })
  ]
};

以下是我尝试将 baseHref 用于 index.html

的方式

<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>

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

我需要帮助才能知道我做错了什么？

非常感谢任何帮助。

谢谢。

Answer 1

https://github.com/jantimon/html-webpack-plugin/issues/212

Github 上的这个问题建议将您的 "index.html" 文件重命名为 "index.ejs"。

这似乎是因为 webpack 正在尝试将 Babel 转译器应用到您的 html 文件但失败了，“.ejs”扩展名将阻止它。

Answer 2

HtmlWebpackPlugin 的主要目的是识别您的条目文件并将它们放在适当的位置 (dist/index.html)。所以你不需要手动。

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

使用 Webpack HtmlWebpackPlugin

Using Webpack HtmlWebpackPlugin

javascript

reactjs

webpack

html-webpack-plugin