为dev/staging/production设置不同的<base>的正确方法是什么

Question

<base href="">

对于开发和生产是不同的(对于生产它的子文件夹).使用webpack构建不同基础的好方法是什么？

Answer 1

到目前为止我发现的最好的是将此属性放在config(HtmlWebpackPlugin选项)中:

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

然后在index.html中输出:

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

我使用`npm install --save-dev base-href-webpack-plugin`.[这是如何!](https://www.npmjs.com/package/base-href-webpack-plugin) (2认同)

Answer 2

如果您将template选项设置为HTML文件,则插件的2.x版将不会执行任何替换.

在这种情况下,您需要修改@ stever的答案,如下所示:

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

并将您的index.html文件重命名为index.ejs