Question

我正在使用webpack import statemement根据promise链中的某些逻辑加载我的UI：

    players=[
             {
                id : 1,
              name : "player1", 
             value : 5.6, 
          position : "Goalkeeper"
             },{
                id : 1,
              name : "player1", 
             value : 7.7, 
          position : "Defender"
             },{
                id : 1,
              name : "player2", 
             value : 6.1, 
          position : "Midfielder"
             },{
                id : 1,
              name : "player1", 
             value : 7.2, 
          position : "Forward"
             },.....n ]

这很好用，但是webpack没有根据这个代码分割点创建一个新的块/文件。我似乎无法找到任何可以深入解释此功能如何工作的资源。

我正在导入一个呈现UI的默认导出功能，该文件如下：

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

我想知道，webpack是否会进一步分析树中的依赖关系并且不会产生代码分割点？

在这个阶段我不担心我是否加载了两次依赖项，我只是试图将动态代码拆分为函数，并且可以在以后清理依赖项。

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

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;

编辑2：只是为了表明我的设置没问题，从vuejs加载异步组件时，按照下面的说法一切正常：

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

  },

提前致谢。

Answer 1

似乎webpack比我聪明！

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

结果是import语句正在运行，但它没有创建新的块。

如果webpack可以指出这一点会很好，在大型项目中，我可以在重构期间经常看到这种情况发生。

什么时候webpack的import（）不会创建新文件？

1 个答案: