1、新建项目，配置pages,项目结构如下：
image.png
1.1 app.html 格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>app</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
1.2 App.vue 格式
<template>
<div id="app"></div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style scoped lang='stylus'></style>
1.3 app.js 格式
import Vue from 'vue'
import App from './App'
import router from '@router/appRouter'
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: (h) => h(App)
})
2、utils.js 里面配置多页面入口自动读取方法和多页面输出配置
/* 这里是添加的部分 ---------------------------- 开始 */
// glob是webpack安装时依赖的一个第三方模块，还模块允许你使用 *等符号, 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件
var glob = require('glob')
// 页面模板
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 取得相应的页面路径，因为之前的配置，所以是src文件夹下的pages文件夹
var PAGE_PATH = path.resolve(__dirname, '../src/pages')
// 用于做相应的merge处理
var merge = require('webpack-merge')
// 多入口配置
// 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件，如果该文件存在
// 那么就作为入口处理
exports.entries = function() {
var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
var map = {}
entryFiles.forEach((filePath) => {
var filename = filePath.substring(
filePath.lastIndexOf('/') + 1,
filePath.lastIndexOf('.')
)
map[filename] = filePath
})
return map
}
// 多页面输出配置
// 与上面的多页面入口配置相同，读取pages文件夹下的对应的html后缀文件，然后放入数组中
exports.htmlPlugin = function() {
let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
let arr = []
entryHtml.forEach((filePath) => {
let filename = filePath.substring(
filePath.lastIndexOf('/') + 1,
filePath.lastIndexOf('.')
)
let conf = {
// 模板来源
template: filePath,
// 文件名称
filename: filename + '.html',
// 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本
chunks: ['manifest', 'vendor', filename],
inject: true
}
if (process.env.NODE_ENV === 'production') {
conf = merge(conf, {
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})
}
arr.push(new HtmlWebpackPlugin(conf))
})
return arr
}
/* 这里是添加的部分 ---------------------------- 结束 */
3、webpack.base.conf.js
设置前
image.png
设置后
image.png
4、修改webpack.dev.conf.js，webpack.prod.conf.js
去掉默认的HtmlWebpackPlugin
image.png
添加根据pages下面的文件自动配置的HtmlWebpackPlugin
image.png
去掉默认的HtmlWebpackPlugin
image.png
添加根据pages下面的文件自动配置的HtmlWebpackPlugin
image.png
网友评论