使用Webpack HtmlWebpackPlugin

时间：2017-09-09 19:00:37

标签： javascript reactjs webpack html-webpack-plugin

我对webpack和东西都很陌生，我需要一个解决方案来分离基础href 的index.html和 src bundle.js < / strong>，对于开发和生产而言两者都不同。

促进发展

base href = localhost

src = /bundle.js

生产

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

以下是我尝试将 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>

我使用上述设置

收到以下错误

enter image description here

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

任何帮助都将受到高度赞赏。

感谢。

2 个答案:

答案 0 :(得分：1)

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

Github上的这个问题建议重命名你的＆＃34; index.html＆＃34;归档到＆＃34; index.ejs＆＃34;。

这似乎是因为webpack正在尝试将Babel转发器应用于您的html文件，但它失败了，＆＃34; .ejs＆＃34;扩展会阻止它。

答案 1 :(得分：0)

HtmlWebpackPlugin的主要目的是识别您的输入文件，并将其放置在适当的位置（dist / index.html）。因此，您不需要手动操作。

如果您没有HtmlWebpackPlugin，则应记住在应用程序中使用的每个文件，然后将其手动添加到index.html中。

相关问题
最新问题