前言:上一次我们实现了一个简单的自动化前端工程,今天我们对这个工程进行优化
本次目标:
1.自动生成页面模板
2.自动生成多入口
3.js抽离
复制代码
意义:
1.无需每次增加页面都要手动操作
2.提升webpack打包性能
复制代码
开始
1.js分离:
optimization: {
splitChunks: {
chunks: "all", // async表示抽取异步模块,all表示对所有模块生效,initial表示对同步模块生效
cacheGroups: {
vendors: {
name: "vendors",
priority: -10 // 抽取优先级
},
}
},
runtimeChunk:{
name:'manifest'
}
}
复制代码
生成多页面配置
1.在webpack.base.config.js下引入fs模块
//fs模块是node.js的文件读取模块,利用这个模块可以方便读取文件夹内的文件(这里我们用到fs的同步读取文件夹的方法)
const fs = require('fs')
复制代码
2.在webpack.base.config.js下按照需要声明两个函数
function htmlList() {
let arr = fs.readdirSync(ENTRY_HTML);
let templeteArr = arr.map(i => {
return new htmlPlugin({
template: `${ENTRY_HTML}/${i}`,
filename: `${i}`,
chunks: ['vendors', 'manifest', i.split('.')[0]]
})
})
return templeteArr;
}
function jsEntry() {
let arr = fs.readdirSync(ENTRY_JS);
let obj = {}
arr.reduce((a, b) => {
let name = b.split('.')[0];
obj[name] = `${ENTRY_JS}/${b}`;
}, obj);
return obj;
}
复制代码
3.用这两个函数替换掉webpack配置的对应固定项
module.exports = {
entry: jsEntry()
...
plugins: [
...htmlList(),
new MiniCssPlugin({
filename: 'css/[name].[hash:8].css',
chunkFilename: 'css/index.[hash:8].css'
}),
]
}
复制代码
以上代码添加完毕后进行测试,在html文件夹下添加一个list.html,在js文件夹下添加list.js,之后运行
npm run build
复制代码
生成的项目目录包含以下几个文件:
done!