在Webpack中為多個HtmlWebpackPlugin輸出添加HMR

Question

我正在嘗試將HMR添加到我的現有項目中。 因此，讓我們從當前如何管理事物開始。

我有多個HTML文件，需要在不同的路徑下投放。 因此，對於/about頁面，我需要提供about.html以及整個react應用javascript。 所以這就是我當前的代碼：

在webpack.config.js ，我使用HtmlWebpackPlugin來添加帶有其chunkhash的標題和js文件。

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(),

這就是webpack配置中的“輸出”外觀。 我將publicPath設置為“ /”。

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

這就是我正在使用webpack-dev-middleware和webpack-hot-middleware的server.js文件的外觀。

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