vue+webpack项目多页面打包

最近公司对接zoom websdk，因为一些特殊原因，需要将zoom相关的页面独立成单独的html页面，这里因为浏览器版本升级引起的问题。所以这里针对vue项目多页面打包整理下，方便自己方便有需要的童鞋。
这里分别讲一下vue2+webpack3 和 vue-cli3不同的配置。

vue2 + webpack3

这种老项目我们都是自己配置webpack，目录基本如上
先讲改动

webpack.base.conf.js

entry: {
    app: './src/main.js',
    meeting: './src/entry/meeting/main.js'
},

这里需要配置一下entry,我是独立了一个文件夹出来放需要单独出来的目录，mainjs里面就可以单独给你的页面做一些定制化配置，比如router、路由拦截器、axios等，相当于另外一个项目，这个就自由发挥了

image.png

类似这样，我这次单独配置了router和路由拦截，记得修改main.js的引入路径

webpack.dev.conf.js + webpack.prod.conf.js

这两个文件只需要增加html插件处理即可，我这里两个配置不太一样

• webpack.dev.conf.js

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      chunks: ['app'],
      inject: true
}),
new HtmlWebpackPlugin({
      filename: 'meeting.html',
      template: 'meeting.html',
      chunks: ['meeting'],
      inject: true
}),

• webpack.prod.conf.js

new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      chunks: ['manifest', 'vendor', 'app']
}),
new HtmlWebpackPlugin({
      filename: config.build.meeting,
      template: 'index.html',
      inject: true,
      chunks: ['manifest', 'vendor', 'meeting']
}),

对应的config中配置了两个地址

index: path.resolve(__dirname, '../dist/index.html'),
meeting: path.resolve(__dirname, '../dist/meeting.html'),

按以上配置完即可，可以测试，这里有几个地方是可以优化的

• enter可以封装成方法，从某个文件夹自动引入
• 根据entry生成HtmlWebpackPlugin这个插件的处理

这样以后只用维护entry引入的目录即可，不需要每次添加页面都再更改，以后有时间将这一块优化一下。

vue-cli3

现在使用vue2的话基本都是vue-cli3系列，webpack配置集成化，更加简单，只用修改几个地方即可

vue.config.js

pages: {
    index: {
        entry: `./src/main.js`,
        template: 'public/index.html',
        filename: 'index.html',
        chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    meeting: {
        entry: `./src/entry/meeting/main.js`,
        template: 'public/meeting.html',
        filename: 'meeting.html',
        chunks: ['chunk-vendors', 'chunk-common', 'meeting']
    }
},

只需要配置这一块即可，其他可能会有零星的小问题，根据报错修改就好，调试过程中还碰到一些问题，但都是因为项目配置引起的，之前框架是其他人直接拉的开源项目改的，所以有一些稀里古怪的配置影响。