webpack3 + vue 多页面开发

315 阅读1分钟

项目结构图,项目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.开发模式指定打开页面


二 生产模式指定打开页面