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

【问题标题】：What is the right way to set a different <base> for dev/staging/production为 dev/staging/production 设置不同的 <base> 的正确方法是什么
【发布时间】：2016-05-14 07:05:20
【问题描述】：

<base href="">

对于开发和生产是不同的（对于生产它是子文件夹）。用 webpack 构建不同的 base 有什么好的方法？

【问题讨论】：

标签： webpack

【解决方案1】：

到目前为止，我发现的最好的方法是将此属性放在配置中（HtmlWebpackPlugin 选项）：

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

然后在index.html中输出：

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

【讨论】：

由于某种原因再也不会被解析为给定的 baseUrl。
HtmlWebpackPlugin 2.x 版更改了模板的处理方式，因此旧的替换不再起作用。见github.com/ampedandwired/html-webpack-plugin/blob/master/docs/…
我使用npm install --save-dev base-href-webpack-plugin。 Here is how to!
由于某些原因，我必须添加minify: { removeAttributeQuotes: false } 或像soe process.env.NODE_ENV === 'development' ? '"/"' : '"/app/"' 一样更新baseUrl，否则输出将是，而不是

【解决方案2】：

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

在这种情况下，您需要修改@stever 的回答如下：

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

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

【讨论】：

【解决方案3】：

现在很容易做到。

在你的项目中安装 base-href-webpack-plugin：

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

【讨论】：

对于 webpack v3 使用 ^1.0.0。对于 webpack v4，请使用 ^2.0.0。你观察到了吗？
是的，如果我没记错的话，我使用的是 1.0.2。另外，我使用HtmlWebpackPlugin中的模板选项，可能是相关的。
抛出 TypeError: Cannot read property 'compilation' of undefined

【解决方案4】：

在 Webpack 4 中，我尝试了 HtmlWebpackPlugin 中的 baseUrl，但它从未在 html 中被解析。所以你需要一个名为 BaseHredWebpackPlugin 的新插件以及 HtmlWebpackPlugin

Webpack.config

 new HtmlWebpackPlugin(), //this will create default template
        new HtmlWebpackPlugin({
            title: 'MyApp' //replace title

        }),
        new BaseHrefWebpackPlugin({
            baseHref: process.env.NODE_ENV == 'development' ? '/' : '/MyApp/'
        })

HTML

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

【讨论】：

【解决方案5】：

如果您使用的是 Angular CLI 6，您可以指定 baseHref 并将 url 部署为 angular.json 内的生产配置（项目 > xxx > 架构师 > 构建 > 配置 > 生产）的一部分。

【讨论】：

【解决方案6】：

如果你使用 webpack，你肯定必须将 output.publicPath 设置为相同的值。见HtmlWebpackPlugin injects relative path files which breaks when loading non-root website paths

【讨论】：