webpackの複数のHtmlWebpackPlugin出力にHMRを追加する

HMRを既存のプロジェクトに追加しようとしています。だから、物事が現在どのように管理されているのかを考えてみましょう。webpackの複数のHtmlWebpackPlugin出力にHMRを追加する

複数のHTMLファイルがあり、それぞれ異なるルートで配信する必要があります。だからページのために、私はabout.htmlを提供する必要があります、全体の反応のアプリのJavaScriptと一緒に提供する必要があります。現在のコードは次のようになります：

webpack.config.jsでは、タイトルとjsファイルをチャンクハッシュで追加するためにHtmlWebpackPluginを使用しています。

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-ミドルウェアおよびWebPACKのホット・ミドルウェアを使用していますどこ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と一緒に素晴らしい作品。しかし、いつでも私がまたは/anythingを開くと、about.htmlまたはbase.htmlが読み込まれますが、そこにはアプリスクリプトが追加されていません。

他のルートではなくインデックスルートで動作するのはなぜですか？あなたの助けをありがとう:)

出典

2017-10-21 Ateev Chopra

はあなたのWebPACKのエントリの設定を示すことができる使用してみては？ –