Webpack HtmlWebpackPlugin - Le fichier fourni sert HTML?

Question

J'utilise webpack avec HtmlWebpackPlugin. Servir l'index.html généré avec un serveur Flask. L'index.html s'appelle bien du serveur Flask. Cependant, je pense qu'il y a une erreur dans ma configuration webpack qui fait que l'app.bundle.js va mal.

Sur les outils de développement du navigateur, je peux voir l'erreur est

Uncaught SyntaxError: Unexpected token <

Lorsque le navigateur charge les app.bundle.js, il semble penser qu'il est une copie du index.html. Cependant, sur mon ordinateur local, je peux voir que le app.bundle.js est le bundle Javascript de webpack.

Webpack du fichier de configuration

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

Ce problème a été causé en ne chargeant pas dans la source JS correctement. Il y avait deux niveaux ci-dessous où la source réelle main.bundle. [Hash] .js était.

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

Aurait été

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

Cependant, le vrai problème était le repli du navigateur. Il n'a pas été capable de trouver la source correctement et a déterré le fichier HTMl qui nécessitait l'inclusion du script ayant échoué. Il a fini par lire un fichier JS quand il a tiré HTML.

J'ai corrigé ceci en ajoutant un publicPath à ma config webpack.

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