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.開發模式指定打開頁面

二 生產模式指定打開頁面