因此，我正在尝试将webpack-dev-middleware和webpack-hot-middleware与 HtmlWebpackPlugin 一起使用，为此我遵循了以下链接https://github.com/jantimon/html-webpack-plugin/issues/145 但我真的无法理解这里的建议。
无论如何，我确实在输出 html 中获得了 bundle.js 文件，但 js 没有按预期执行。此外，我确实HMR Connected在控制台中收到消息。不过，这同样适用于我的生产 webpack 文件。
我该如何解决这个问题或着手解决这个问题？
另外，根据下面的项目结构，我提供了多个 html 文件，因此在 srcServer.js 中合并这些文件的任何输入？
包.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]'
}
}
}
]
}
}
项目结构
铬检查
如果有太多代码需要理解，我已经创建了一个包含所需代码的 repo @ https://github.com/pks90/webpack-dev-and-hot-middleware-sample