使用webpack进行代码分离时，动态导入import()浏览器报错

Question

page.js如下，在page.js中通过import()语法导入其它模块

import(/* webpackChunkName: 'subPageA'*/ "./subPageA").then(function(subPageA) {
  console.log(subPageA);
});

import(/* webpackChunkName: 'subPageB'*/ "./subPageB").then(function(subPageB) {
  console.log(subPageB);
});

import(/* webpackChunkName: 'lodash'*/ "lodash").then(function(_) {
  console.log(_.join(["1", "2"]));
});

webpack.config.js如下：

const webpack = require("webpack");
const path = require("path");

module.exports = {
  mode:'development',
  entry: {
    page: "./src/page.js" //
  },
  output: {
    publicPath: __dirname + "/dist/",
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].chunk.js"
  }
};

报错信息：


官方文档表示需要浏览器支持promise特性，但是我的chrome是最新的71版本，肯定是支持promise的。

我也尝试过使用服务器去获取资源，同样出现一样的错误。

Answer 1

对不起，打扰了，问题出在webpack的out.publicPath配置上，造成浏览器文件引入路径错误

详见 https://webpack.docschina.org...