Webpack打包路径问题

Webpack打包路径缺省为绝对路径。

如果想把打包路径改为相对自定义路径，对于build环境(即最终一般会部署到proxy后)，需要修改config/index.js中的build段中的assetsPublicPath即可。

... ...
module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
... ...

关于这个assetsPublicPath，再多说两句。

不论assetsPublicPath设置成绝对路径还是相对路径，在我们的js文件中我们自己引入的任何URL，不管是script标签的src属性，还是img标签的src属性，如果URL是绝对路径，压缩打包后生成文件中对应URL就是绝对路径；如果URL是相对路径，压缩打包后生成文件中对应URL就是相对路径。也就是说，assetsPublicPath不会修改代码中既有URL路径。

那么assetsPublicPath影响什么URL呢？assetsPublicPath影响的是：Webpack最终自动在index.html中插入的，由Webpack自动压缩打包生成的js引用的URL。

举例来说，如果assetsPublicPath设为'/'(缺省行为)，则最终的index.html中会包含形如：

... ...


... ...

如果assetsPublicPath设为'./'，则最终的index.html中会包含形如：

... ...

... ...

关于assetsPublicPath言尽于此。

对于dev环境(即启动Node.js服务)，只修改config/index.js中的dev段中的assetsPublicPath是不行的，还需要将build/webpack.dev.conf.js中devServer段中的publicPath改为'/'。

... ...
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: '/',
... ...