使用 Webpack - ES6 设置延迟加载组件的正确路径

Question

在我的应用程序中.js文件中，我在一个函数中有一个事件，我使用延迟加载技术导入另一个模块(与文档中的模块相同)：

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

在我的 webpack 配置中，我设置了这个(除了 Babel、SASS 加载器等)：

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"文件夹，而不是来自我的"dist"文件夹，webpack 在其中放置了所有捆绑包，所以我收到 404 错误。如果我将路径更改为"./dist/print"，那么 webpack 构建将崩溃。

我是否缺少 webpack 配置？

编辑： 文件夹结构：

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

Answer 1

您不必在dist文件夹中使用模块路径，只需在src文件夹中处理。

我认为有两种解决方案：

1/在导入语句中指定 src 路径：

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

2/就个人而言，我通常做的是将src文件夹添加到配置文件中的解析路径：

resolve: {
modules: [
path.resolve('./node_modules'),
path.resolve('./src/js')
],
extensions: ['.json', '.js']
},

然后，您的代码应该无需更改一行即可工作。