webpack 的 import() 什么时候不会创建新文件？

Question

我正在使用 webpack 导入状态来加载我的 UI，基于承诺链中的一些逻辑：

initLoader()
.then( loaderData => initCmp(loaderData) )
.then( () => initApi )
.then( () => import(/* webpackChunkName: "ui" */ './ui/main.js') )
.then( (app) => app.default(1) )
.catch();

这工作正常，但 webpack 不会基于此代码拆分点创建新的块/文件。我似乎找不到任何资源来深入解释此功能的工作原理。

我正在导入一个渲染UI的默认导出函数，该文件如下所示：

import Vue from 'vue';
import Vuikit from 'vuikit';
// import and make global all components
import App from './App.vue';
Vue.component('app-init', App);
// creating a root in the DOM for the app to attach to, when called
const divToAttachApp = document.createElement('div');
divToAttachApp.setAttribute('id', 'cmp-app');
document.body.appendChild(divToAttachApp);
// create the app instance and attach it to the DOM in a hidden state
const vm = new Vue(App).$mount('#cmp-app');
// this function is called to load the UI, it accepts the clientId
function renderVueApp(clientId) {
return new Promise((resolve, reject) => {
if (vm) {
vm.$store.dispatch('setClientId', parseInt(clientId));
vm.$store.commit('changeShowState', true);
EventBus.$on('save-selection', value => {
console.log(`CMP-UI :: Resolving Promise (save-selection): ${JSON.stringify(value)}`);
resolve(value);
});
} else {
console.error(`CMP-UI :: No App Present`);
}
});
}
export default renderVueApp;

我想知道，webpack 是否进一步分析树下的依赖关系而不是制作代码拆分点？

在这个阶段，我不担心我是否加载了两次依赖项，我只是想让动态代码拆分发挥作用，并且可以稍后清理依赖项。

编辑： Webpack 配置 - 我正在使用 v4

output: {
path: path.resolve(__dirname, 'dist'),
publicPath : isProduction ? PRODUCTION_HOST : '/',
filename: '[name].bundle.js',
chunkFilename: '[name].chunk.bundle.js',
},

编辑2： 只是为了表明我的设置很好，当从 vuejs 加载异步组件时，如下所述，一切正常：

Vue.component('Modal', () => import(/* webpackChunkName: "modal" */ './components/Modal.vue'));

提前谢谢。

Answer 1

看来webpack比我聪明！

问题是我已经在我的应用程序的其他地方将此特定模块导入到依赖项树中。

结果是导入语句正常工作，但它没有创建新块。

如果 webpack 可以指出这一点，那就太好了，在大型项目中，我可以看到这种情况在重构过程中经常发生。