Question

html-webpack-plugin能够处理子目录中的文件名。但是，与子目录文件名结合使用时，默认动态导入似乎正在破坏。我已尝试设置publicPath并输出path，但此类设置会影响所有块的路径。我已经通过以下最小项目重现了这个问题：

webpack.config.js

const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  plugins: [
    new HTMLWebpackPlugin({
      filename: 'example/index.html',
    })
  ]
}

的src / index.js

console.log('root loaded');

import('./part2.js').then((v) => {
  console.log(v);
});

的src / part2.js

console.log('part2 loaded');

以上配置正确创建了相对路径为main.js的html文件。以下是生成的树结构：

dist
├── 0.js
├── example
│   └── index.html
└── main.js

1 directory, 3 files

但是使用以下脚本加载动态块：

<script charset="utf-8" src="0.js"></script>

由于搜索0.js为/example/0.js

而产生错误

Failed to load resource: the server responded with a status of 404 (Not Found)
Error: Loading chunk 0 failed.

确保正确加载动态导入的正确方法是什么？

html-webpack-plugin上的子目录文件名，带有动态导入的块

0 个答案: