通过webpack提供的bundle.js不适用于webpack-dev-middleware + HtmlWebpackPlugin

Question

因此，我尝试将 webpack-dev-middleware 和 webpack-hot-middleware 与HtmlWebpackPlugin结合使用，为此，我遵循了以下链接{{3} } 但我真的不明白这里的建议。

无论如何，我确实在输出html中获得了bundle.js文件，但是js未按预期执行。此外，我在控制台中也得到了HMR Connected消息。不过，对于我的生产webpack文件也是如此。

  

我该如何解决此问题或解决该问题？

     

另外，根据下面的项目结构，我有多个html文件   被送达，以便将这些输入的任何输入合并到   srcServer.js吗？

package.json

...
    "start": "babel-node buildScripts/srcServer.js"
...

srcServer.js

/* eslint-disable */
import express from 'express'
import path from 'path'
import opn from 'opn'
import bodyParser from 'body-parser'
import historyApiFallback   from 'connect-history-api-fallback'
import WebpackDevMiddleware from 'webpack-dev-middleware'
import WebpackHotMiddleware from 'webpack-hot-middleware'
import WebpackConfig from '../webpack.config'
import webpack from 'webpack'

const compiler = webpack(WebpackConfig)
const app = express()
const port = 8080

app.use(historyApiFallback({
  verbose: false
}))

app.use(WebpackDevMiddleware(compiler, {
  publicPath: WebpackConfig.output.publicPath,
  hot: true,
  quiet: false,
  noInfo: false,
  lazy: false,
  stats: {
    colors: true
  }
}))

app.use(WebpackHotMiddleware(compiler))


app.use('*', function (req, res, next) {
  console.log(req.url)
  var filename = path.join(compiler.outputPath,'login/login.html');
  compiler.outputFileSystem.readFile(filename, function(err, result){
    if (err) {
      return next(err);
    }
    res.set('content-type','text/html');
    res.send(result);
    res.end();
  });
});






// set up routing
app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, '../dist/login/login.html'))
})

app.get('/dashboard', function (req, res) {
  res.sendFile(path.join(__dirname, '../dist/dashboard/dashboard.html'))
})

app.get('/assessments', function (req, res) {
  res.sendFile(path.join(__dirname, '../dist/assessments/assessments.html'))
})

app.get('/registration', function (req, res) {
  res.sendFile(path.join(__dirname, '../dist/registration/registration.html'))
})

app.get('/success', function (req, res) {
  res.sendFile(path.join(__dirname, '../dist/responses/success.html'))
})


// set up listening
app.listen(port, function (err) {
  if (err) {
    console.log(err)
  } else {
    opn('http://localhost:' + port)
  }
})

webpack.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: [
    'webpack-hot-middleware/client?http://localhost:8080&timeout=20000', './src/login/app.js'
  ],
  target: 'web',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [

    new webpack.HotModuleReplacementPlugin(),

    new CopyWebpackPlugin([
      {
        from: './src/images/',
        to: 'images/',
        force: true
      },
      {
        from: './node_modules/bootstrap/fonts/',
        to: 'node_modules/bootstrap/fonts/',
        force: true
      }
    ]),

    new HtmlWebpackPlugin({
      filename: 'login/login.html',
      template: './src/login/login.html',
      inject: true
    }),

    new HtmlWebpackPlugin({
      filename: 'dashboard/dashboard.html',
      template: './src/dashboard/dashboard.html',
      inject: true
    }),

    new HtmlWebpackPlugin({
      filename: 'assessments/assessments.html',
      template: './src/assessments/assessments.html',
      inject: true
    }),

    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '../../node_modules/bootstrap/fonts/[name].[ext]'
          }
        }
      },
      {
        test: /\.(png|jpg)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '../images/[name].[ext]'
          }
        }
      },
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader',
          options: {
            name: '../*/[name].[ext]'
          }
        }
      }
    ]
  }
}

项目结构

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

Chrome浏览器检查

如果要理解的代码太多，我已使用所需的代码@

创建了一个存储库