Question

我正在尝试将HMR添加到我现有的项目中。因此，让我们从当前如何管理事物开始。

我有多个HTML文件需要在不同的路径上提供。因此对于/about页面，我需要提供about.html，以及整个反应应用程序javascript。这就是我当前代码的样子：

在webpack.config.js中，我使用HtmlWebpackPlugin添加标题和js文件及其chunkhash。

new HtmlWebpackPlugin({
  title: `Welcome to my app`,
  template: './build/index.html',
}),
new HtmlWebpackPlugin({
  title: `Welcome to my app`,
  filename: 'about.html',
  template: './build/about.html',
}),
new HtmlWebpackPlugin({
  title: `Welcome to my app`,
  filename: 'base.html',
  template: './build/base.html',
}),
new webpack.HotModuleReplacementPlugin(),

这是＆＃34;输出＆＃34;在webpack配置中看起来像。我将publicPath设置为＆＃39; /＆＃39;。

  output: {
    path: path.resolve(__dirname, '..', 'build'),
    publicPath: '/',
    filename: 'js/[name]-[hash].js',
  },

这就是我的server.js文件的样子，我在哪里使用webpack-dev-middleware和webpack-hot-middleware。

const compiler = require('webpack')(webpackConfig);
app.use(require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  colors: true,
}));

app.use(require('webpack-hot-middleware')(compiler, {
  quiet: true,
  noInfo: true,
  log: console.log,
  path: '/__webpack_hmr',
}));

这就是我提供HTML文件的方式：

app.get('/', (req, res) => res.sendFile(path.join(__dirname, '/../build/index.html')));
app.get('/about', (req, res) => res.sendFile(path.join(__dirname, '/../build/about.html')));
app.get('/status', (req, res) => res.send('Status OK'));
app.get('*', (req, res) => res.sendFile(path.join(__dirname, '/../build/base.html')));

现在，当我打开路线的/时，一切都与HMR一起很好用。但是，每当我打开/about或/anything时，都会加载about.html或base.html，但是没有添加应用脚本。

为什么它适用于索引路由而不是其他路由？谢谢你的帮助：）

Answer 1

dev-Server不在磁盘上写HTML。所以它不会创建其他HTML文件并向其添加块。对于索引，我认为它使用内存来提供HTML。

尝试使用https://github.com/jantimon/html-webpack-harddisk-plugin https://gist.github.com/ampedandwired/becbbcf91d7a353d6690

在webpack中为多个HtmlWebpackPlugin输出添加HMR

1 个答案: