Question

我使用1个网络包设置制作包含2页（输入文件）的Vue应用程序。问题是生成的条目文件中包含相同的内容。 file1 的内容为 file2 ，反之亦然。

我有这个切入点：

 entry: {
    'page1': ['./src/pages/page1/main'],
    'page2': ['./src/pages/page2/main'],
    'vendor': [
       // Node module libraries

     ]
 },
 output: {
  filename: '[name].js',
  chunkFilename: '[name].[id].js',
  path: config.dev.assetsRoot
}

我使用.vue文件，所以我需要voe-loader。以下是vue-loader选项：

loaders: {
    'ts': 'ts-loader!tslint-loader', // Let ts-loader and tslint validate .vue script
    'i18n': '@kazupon/vue-i18n-loader', // i18n loader for Message properties
    /**
     * SCSS loader for .vue scss files and extract the text to usr-styles.css
     */
    'scss': ExtractTextPlugin.extract({
        fallback: 'vue-style-loader',
        use: [
            {
                loader: 'css-loader',
                options: {
                    sourceMap: false                        
                }
            }, 
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: false                        
                }
            }
        ]
    }),
    /**
     * CSS loader for .vue css files and extract the text to usr-styles.css
     */
    'css': ExtractTextPlugin.extract({
        fallback: 'vue-style-loader',
        use: [
            {
                loader: 'css-loader',
                options: {
                    sourceMap: false                        
                }
            }, 
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: false                        
                }
            }
        ]
    })
},
extractCSS: true,
esModule: true,
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
}

所以这是我的主要内容。

import App from './App.vue';

// Creation of Vue instance
const vm = new Vue({
   el: '#app',
   i18n,
   store,
   render: h => h(App)
});

App.vue

<template>
  <el-container>
          page1
  </el-container>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import Header from 'Header/Header.vue';
import Baselayout from 'page1/Baselayout.vue';

@Component({
  components: {
      'header-view': Header,
      'baselayout-view': Baselayout
  }
})
export default class App extends Vue { }
</script>

一些插件版本：

"webpack": "^3.10.0",
"vue": "^2.5.2",
"vue-property-decorator": "^6.0.0",
"ts-loader": "^3.2.0",
"typescript": "^2.6.2",
...

因此，基本上page1具有不同的组件导入以及page2。但它们与实用程序，容器和供应商相同。

我只是不明白为什么第1页和第2页的生成文件里面有相同的内容？在开发Vue应用程序时是否有可能有多个条目文件？

我需要这方面的帮助，或者另一种方法是为另一页提供另一个不适合我的webpack设置。

具有webpack配置中的多个条目文件的Vue应用程序[重复内容]

0 个答案: