我使用的是webpack@3.12.0和webpack-dev-server@2.11.2，以下是我的WebPack配置：

module.exports = { 
  entry: ["./src/index.js", "./src/styles/main.scss"], 
  output: { 
    filename: "bundle.js", 
    path: path.resolve(__dirname, "./public/dist"), 
    publicPath: '/' 
  }, 
  module: { 
    rules: [ 
      { 
        test: /\.scss/, 
        loader: ExtractTextPlugin.extract(["css-loader", "sass-loader"]) 
      }, 
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loaders: "babel-loader", 
        options: { 
          presets: ["react", "stage-0", "es2015"], 
          plugins: ["transform-class-properties"] 
        } 
      } 
    ] 
  }, 
  devServer: { 
    contentBase: "./public/", 
    watchContentBase: true, 
    port: 3000 
  }, 
  plugins: [ 
    new ExtractTextPlugin("bundle.css"), 
    new webpack.DefinePlugin({ 
      "process.env.NODE_ENV": JSON.stringify("production") 
    }), 
    new webpack.optimize.UglifyJsPlugin() 
  ] 
};

我设置了publicPath: '/'，但页面中的链接<a href="/">Text</a>仍指向localhost:3000，请问如何获取链接的绝对路径？

首先得明确：publicPath主要是用来控制Webpack打包生成的资源（比如JS、CSS、图片等）的引用路径，它并不会直接修改页面中普通<a>标签的href属性。要让页面中的链接生成绝对路径，你可以试试以下几种方案：

方案1：通过DefinePlugin注入基础URL #

你已经在使用webpack.DefinePlugin了，可以直接在里面添加一个全局的基础URL变量，比如：

new webpack.DefinePlugin({
  "process.env.NODE_ENV": JSON.stringify("production"),
  "BASE_URL": JSON.stringify("https://your-production-domain.com") // 替换成你的生产环境域名
})

然后在页面的链接中使用这个变量：

// React项目示例
<a href={`${BASE_URL}/`}>Text</a>

或者在普通JS场景中：

document.querySelector('a').href = `${BASE_URL}/`;

方案2：配置devServer的public属性（开发环境） #

如果只是在开发环境想让链接指向自定义的带域名地址，可以给devServer添加public配置：

devServer: {
  contentBase: "./public/",
  watchContentBase: true,
  port: 3000,
  public: "your-local-domain.com:3000" // 需先在本地hosts文件配置该域名映射到127.0.0.1
}

这样开发环境下，页面中的绝对路径链接会指向your-local-domain.com:3000而不是默认的localhost:3000。

方案3：HTML模板中动态注入基础URL #

如果你使用了html-webpack-plugin，可以在HTML模板中通过模板变量动态注入基础URL：

1. 先配置html-webpack-plugin：

plugins: [
  // ...其他已有的插件
  new HtmlWebpackPlugin({
    template: './src/index.html',
    baseUrl: process.env.NODE_ENV === 'production' ? 'https://your-production-domain.com' : 'http://localhost:3000'
  })
]

2. 在HTML模板中使用变量：

<a href="<%= htmlWebpackPlugin.options.baseUrl %>/">Text</a>

补充说明 #

• publicPath的核心作用是告诉Webpack，打包后的静态资源应该从哪个路径加载，比如你的bundle.js会从/bundle.js加载，而不是/dist/bundle.js，这和页面的跳转链接逻辑是完全独立的。
• 如果是生产环境部署，还需要确保你的服务器配置正确，把所有路由请求指向入口HTML文件，避免刷新页面出现404问题。

内容的提问来源于stack exchange，提问作者Con Posidielov