Webpack-ES6懒加载组件路径配置异常，求正确设置方案

问题描述 #

我在app.js的函数中使用懒加载导入模块，代码如下：

button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => { 
  var print = module.default; 
  print(); 
});

我的Webpack配置（已配置Babel、SASS loader等）：

const path = require('path'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 

module.exports = { 
  watch: true, 
  entry: { 
    main: ['babel-polyfill', './src/js/app.js','./src/sass/main.sass'] 
  }, 
  output: { 
    chunkFilename: '[name].bundle.js', 
    path: path.resolve(__dirname, "dist"), 
    filename: '[name].js', 
  }, 
  module: { 
    rules: [ 
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        use: { 
          loader: 'babel-loader', 
          options: { 
            presets: ["babel-preset-env", "babel-preset-stage-0"] 
          } 
        } 
      }, 
      { 
        test: /\.sass$/, 
        exclude: /node_modules/, 
        use: ExtractTextPlugin.extract({ 
          fallback: 'style-loader', 
          use: [ 
            'css-loader', 
            { 
              loader: 'sass-loader', 
              query: { 
                sourceMap: false, 
              }, 
            }, 
          ], 
        }), 
      }, 
    ] 
  } 
}

遇到的问题：

• 路径./print指向src文件夹，但Webpack将打包文件放在dist文件夹，触发懒加载时出现404错误。
• 若将路径改为./dist/print，Webpack构建直接失败。

我的文件夹结构：

src
  js
    app.js
    print.js
dist
  main.bundle.js
  print.bundle.js

解决方案 #

别担心，这个问题其实是因为你遗漏了Webpack的**公共路径（publicPath）**配置，我来帮你搞定：

核心原因 #

Webpack打包后，懒加载的chunk文件会在浏览器运行时动态请求，但Webpack默认不知道这些chunk的部署路径，会以当前页面URL为基准去请求，而非指向你的dist目录，这就导致了404。

具体修改：添加output.publicPath #

你只需要在Webpack配置的output部分新增publicPath字段，指定chunk文件的根路径即可：

修改后的output配置：

output: { 
  chunkFilename: '[name].bundle.js', 
  path: path.resolve(__dirname, "dist"), 
  filename: '[name].js', 
  // 新增公共路径配置，指定动态资源的请求根路径
  publicPath: './dist/' 
},

为什么这样有效？ #

• publicPath会告诉Webpack：所有动态加载的资源（包括懒加载的chunk）都要从这个路径下请求。
• 这样浏览器触发懒加载时，就会正确请求./dist/print.bundle.js，而不是错误地从当前页面路径寻找文件。
• 你不需要修改import('./print')里的路径，这个路径是给Webpack构建阶段用的，它会根据源码结构找到print.js，构建后自动替换成publicPath + chunkFilename的路径。

额外注意事项 #

• 如果你的dist目录部署在网站根目录（比如https://your-site.com/dist/），建议把publicPath设为绝对路径/dist/，这样更稳妥，避免页面路由变化导致路径出错。

内容的提问来源于stack exchange，提问作者Ismael Ordás