Webpack如何修改默认静态资源的加载路径配置

完全可以实现，不需要手动解析chunks，修改Webpack的publicPath配置项即可完成静态资源基础路径的替换，不同项目的配置方式如下：

• 如果你使用的是vue-cli搭建的Vue项目（默认集成Webpack）
  在项目根目录找到vue.config.js文件（如果没有就手动新建），添加如下配置：

module.exports = {
  // 所有静态资源的加载路径都会自动加上该前缀
  publicPath: '/vue_dist/'
}

如果需要区分开发环境和生产环境，可以按环境变量动态赋值：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/vue_dist/' : '/'
}

• 如果你是手动配置Webpack的Vue项目
  找到Webpack的生产环境配置文件（通常为webpack.config.js或config/webpack.prod.js），修改output字段的publicPath属性，如果使用了mini-css-extract-plugin处理CSS资源，需要同步修改插件配置的publicPath：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  output: {
    // 其他output配置保持不变
    publicPath: '/vue_dist/'
  },
  plugins: [
    new MiniCssExtractPlugin({
      publicPath: '/vue_dist/'
    })
  ]
}

配置修改完成后重新执行构建命令，所有JS、CSS、图片等静态资源的加载路径都会自动替换为/vue_dist/js/xxx、/vue_dist/css/xxx格式，完全匹配你的服务器配置要求。

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