Question

我正在使用Webpack分块来拆分我的组件

使用这两个库-

“ babel-plugin-dynamic-import-webpack”：“ ^ 1.1.0”，
“ babel插件语法动态导入”：“ ^ 6.18.0”，

当我延迟加载组件时-

const component1 = () => import(/* webpackChunkName: "components" */ '../components/Component1.vue');

工作正常但是，当我尝试延迟加载类似 bootstrap-vue -

的库时

const BootstrapVue = () => import(/* webpackChunkName: "bootstrap-vue" */ 'bootstrap-vue')
Vue.use(BootstrapVue);

给我一个错误，说bootstrap-vue组件是未知的-

错误消息：Unknown custom element: <b-container> - did you register the component correctly?

但是，如果我只按常规进行import BootstrapVue from 'bootstrap-vue'，它就可以正常工作。但是它不会进行代码拆分。

用webpack块导入库并制作自己的文件的好方法是什么？

Webpack配置。我正在使用laravel-mix-

webpackConfig.output = {
    chunkFilename: 'js/[name].bundle.js',
    publicPath: '/',
}

Answer 1

import返回一个Promise。所以这个：

const promise = import(/* webpackChunkName: "bootstrap-vue" */ 'bootstrap-vue');

promise.then(BootstrapVue => {
  Vue.use(BootstrapVue);
  new Vue({
    render: h => h(App)
  }).$mount('#app');
});

在承诺解决后将引导Vue。

Webpack-代码拆分：将库拆分成自己的文件

1 个答案: