vue多页面打包配置

因业务需求中，有多页面打包的需求

经个人查阅，有两种处理方式

方式一

vue-cli版本3.x是支持多页打包的，可以直接在webpack.config.js 中添加pages，配置比较方便

  pages: {
    index: {
      entry: './src/main.js',
      template: 'index.html',
      filename: 'index.html'
    },
    index2: {
      entry: './src/main2.js',
      template: 'index2.html',
      filename: 'index2.html'
    }
  }

 方式二

vue-cli版本2.x实现多页面打包，需要配置一些文件，亲测可用

1.修改webpack.base.conf.js，配置entry添加入口，并与Chunk（后面解释）对应

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

 2.修改webpack.dev.conf.js，在plugins下找到new HtmlWebpackPlugin，并为每个页面添加Chunk配置

例如：chunk [ 'app' ] 中的app对应的是上面web[ack.base.conf.js中entry设置的入口文件

plugins:[
    new HtmlWebpackPlugin({
      filename: 'index.html',//生成的html
      template: 'index.html',//来源html
      inject: true,//是否开启注入
      chunks: ['app']//需要引入的Chunk，不配置就会引入所有页面的资源
    }),
    new HtmlWebpackPlugin({
      filename: 'index2.html',//生成的html
      template: 'index2.html',//来源html
      inject: true,//是否开启注入
      chunks: ['app2']//需要引入的Chunk，不配置就会引入所有页面的资源
    }),
]

3.修改config下的index.js，找到build下的index:path.resolve(_dirname,'../dist/index.html') ,后添加多页配置

build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    index2: path.resolve(__dirname, '../dist/index2.html')
}

4.修改webpack.prod.conf.js，在步骤2类似，在plugins下找到new HtmlWebpackPlugin，添加对应多页，filename中引用的是config/index.js中对应的build

plugins: [
    new HtmlWebpackPlugin({
        filename: config.build.index,
        template: 'index.html',
        inject: true,
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
            // more options:
            // https://github.com/kangax/html-minifier#options-quick-reference
        },
        // necessary to consistently work with multiple chunks via CommonsChunkPlugin
        chunksSortMode: 'dependency',
        chunks: ['manifest','vendor','app']//需要引入的Chunk，不配置就会引入所有页面的资源
    }),
    new HtmlWebpackPlugin({
        filename: config.build.index2,
        template: 'index2.html',
        inject: true,
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
        },
        chunksSortMode: 'dependency',
        chunks: ['manifest','vendor','app2']//需要引入的Chunk，不配置就会引入所有页面的资源
    })
]

根据以上步骤配置完成后，重新打包即可，如需运行访问，可直接访问html页面

特此记录