dev/staging/productionに異なる<base>を設定する正しい方法は、開発者用と生産用に異なる（プロダクション用にはサブフォルダです）

Question

<base href=""> 

です。ウェブパックとは異なるベースを構築するための良い方法は何ですか？

Answer 1

私がこれまでに設定（HtmlWebpackPluginオプション）で、このプロパティを置くことがわかった何のベスト：

new HtmlWebpackPlugin({ 
    ... 
    baseUrl: process.env.NODE_ENV == 'development'?'/':'/app/' 
}) 

、その後のindex.htmlで出力して：

<base href="<%= htmlWebpackPlugin.options.baseUrl %>" /> 

Answer 2

をお持ちの場合templateオプションをHTMLファイルに設定すると、プラグインのバージョン2.xは置換を実行しません。

次のようにこのケースでは、steverの答え@変更する必要があります：

new HtmlWebpackPlugin({ 
    ... 
    template: './src/index.ejs', 
    baseUrl: process.env.NODE_ENV == 'development'?'/':'/app/' 
}) 

をしてindex.ejs

Answer 3

にごindex.htmlファイル名を変更し、あなたがWebPACKのを使用している場合、あなたは確かにoutput.publicPathを設定する必要があります同じ値にする。 参照HtmlWebpackPlugin injects relative path files which breaks when loading non-root website paths

Answer 4

今は簡単です。

プロジェクトにおけるベースHREF-WebPACKの-プラグインをインストールします。

npm install --save-dev base-href-webpack-plugin 

とWebPACKのファイルにこのコードをインポート：

// Import package 
const { BaseHrefWebpackPlugin } = require('base-href-webpack-plugin'); // Or `import 'base-href-webpack-plugin';` if using typescript 

// Add to plugins 
plugins: [ 
    new BaseHrefWebpackPlugin({ baseHref: '/' }) 
] 

参考：何らかの理由でhttps://github.com/dzonatan/base-href-webpack-plugin