Webpack HtmlWebpackPlugin - 捆绑文件提供HTML？

Question

我正在使用带有HtmlWebpackPlugin的webpack。使用Flask服务器提供生成的index.html。从Flask服务器调用index.html。但是，我认为我的webpack配置中存在一个错误，导致app.bundle.js变坏。

在浏览器开发人员工具上，我可以看到错误是

  

未捕获的SyntaxError：意外的标记＆lt;

当浏览器加载app.bundle.js时，它似乎认为它是index.html的副本。但是在我的本地计算机上，我可以看到app.bundle.js是webpack Javascript包。

Webpack配置文件

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, "static/dist"),
    filename: '[name].bundle.[hash].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'index.template.ejs'),
      showErrors: true,
      hash: true,
    })
  ],
  module: {
    rules: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: { importLoaders: 1, modules: true },
          },
          "sass-loader"
        ],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      },
      {
        test: /\.svg$/,
        loader: 'svg-inline-loader'
      }
    ],

  },
  resolve: {
    alias:{
      components: path.resolve(__dirname, './components'),
      containers: path.resolve(__dirname, './containers'),
      channels: path.resolve(__dirname, './channels'),
      models: path.resolve(__dirname, './models'),
      stores: path.resolve(__dirname, './stores'),
      lib: path.resolve(__dirname, './lib')
    },
    modules: ['components', "node_modules"],
    extensions: ['.js', '.jsx']
  }
};

Answer 1

此问题是由于未正确加载JS源而引起的。它是实际main.bundle下面的两个级别。[hash] .js source是。

<script type="text/javascript" src="main.bundle.[hash].js"></script>

应该是

<script type="text/javascript" src="static/dist/main.bundle.[hash].js"></script>

但真正的问题是浏览器的后备。它无法正确找到源，并挖出了需要失败脚本包含的HTMl文件。它在拉出HTML时最终读取了一个JS文件。

我通过在webpack配置中添加一个publicPath来修复此问题。

module.exports = {
...
  output: {
      ...
      publicPath: 'static/dist'
      ...
  }
...
}