Question

我正在做多页面应用并为我的UI使用vue.js组件，所以我的输出文件结构如下：

common.js
page1
--page1.css
--page1.js
--page1.html
page2
--page2.css
--page2.js
--page2.html
and so on...

我的webpack.config文件： https://gist.github.com/lavezzi1/5bb6db29a19a2ca4b1ec08c4a01b19f5

我的典型输入文件如下所示：

import Vue from 'vue';
import App from './app';

import Toast from '@library/toast';

require('@blocks/base');

new Vue({
  el: '#app',
  components: {Toast},
  data: {
      msg: 'Dashboard page'
  }
})

现在我有42页。因此，如果我使npm运行构建然后连接所有css文件（例如）它重约2mb，如果每个页面包含按钮，则此css文件包含42个此组件的重复。

我相信js的问题。来自github的一个人建议我这样做https://github.com/webpack/webpack/issues/3104#issuecomment-256319225

制作供应商档案。所以我这样做了：

const entriesPlusVendor = Object.assign({}, entries, {
  vendor: ['vue']
});

module.exports = {
    entry: entriesPlusVendor,

现在创建vendor.js和common.js文件但包含相同的代码（vue代码）但common.js更大一些。

任何帮助人员，我都坚持下去。

UPD：我发现这个回购https://github.com/lincenying/vue2-multiple-entry非常好用，按预期创建vendor.js和common.js，但不适合我的文件结构。

如何避免使用webpack重复代码？

0 个答案: