webpack3 + vue 多页面开发

项目结构图，项目src 部分分为goods 和 users 两个部分，配置文件公共

1.webpack.base.conf.js 文件中配置多入口

entry: {       goods: './src/goods/main.js',       users:'./src/users/main.js'  }复制代码

2. HtmlWebpackPlugin 提取做为一个公共的组件

const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = [  new HtmlWebpackPlugin({  filename: 'users.html',  template: 'index.html',  inject: true,  minify: {  removeComments: true,  collapseWhitespace: true,   removeAttributeQuotes: true},  chunksSortMode: 'dependency',  chunks: ['manifest','vendor','users']}),new HtmlWebpackPlugin({  filename: 'goods.html',  template: 'index.html',  inject: true,  minify: {  removeComments: true,  collapseWhitespace: true,  removeAttributeQuotes: true },   chunksSortMode: 'dependency',   chunks: ['manifest','vendor','goods']    })

]复制代码

3.加入到webpack.base.conf.js

const myHtmlPlugin = require('./myHtmlPlugin.js')plugins: myHtmlPlugin复制代码

4.打包以后内容

5.开发模式指定打开页面

二 生产模式指定打开页面