webpack学习六（多页面通用打包方案）
2020-07-13 本文已影响0人
爱藏不藏
MPA
多页应用，我们之前的学习都是针对SPA单页应用
修改/src/index.js为
console.log('index page');
在src目录下新增list.js、detail.js,内容类似index.js
修改webpack.config.js
entry: {
index: './src/index.js',
list: './src/list.js',
detail: './src/detail.js'
},
输出的文件名直接对应源文件名就行了
output: {
path: path.resolve(__dirname, './dist'), // 输出到哪里，必须是绝对路径
filename: '[name].js'
},
HtmlWebpackPlugin这里配置三个页面，但用同一个模板
plugins: [ // 插件，作用于webpack构建的整个生命周期
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html'
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'list.html'
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'detail.html'
}),
...
]
执行打包命令（npm run test）,完后查看dist目录
img1
生成了三个html三个js，但是每个html文件中都引入了三个js文件？而我们的目的是各自的html引入各自的js！
我们可以在HtmlWebpackPlugin构造函数中新增一个字段“chunks”指定需要引入的js
修改webpack.config.js
plugins: [ // 插件，作用于webpack构建的整个生命周期
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
chunks: ['index']
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'list.html',
chunks: ['list']
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'detail.html',
chunks: ['detail']
}),
...
]
重新打包，这样每个html都引入了指定的一个js入口文件
以上解决方案，过于繁琐，每增加一个页面都需要增加配置，现在我们来学习一下怎么做成一个通用方案？
调整目录结构
img2
安装glob来匹配路径
npm i glob -D
在项目根目录下新建webpack.mpa.js
const glob = require('glob');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const setMPA = () => {
const entry = {};
const htmlWebpackPlugins = [];
const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js'));
entryFiles.map((item, index) => {
const entryFile = item;
const match = entryFile.match(/src\/(.*)\/index\.js$/);
console.log(match);
const pageName = match && match[1];
entry[pageName] = entryFile;
htmlWebpackPlugins.push(new HtmlWebpackPlugin({
title: pageName,
template: path.join(__dirname, `src/${pageName}/index.html`),
filename: `${pageName}.html`,
chunks: [pageName],
inject: true // true或body会放到页面底部，false或head则相反
}));
});
return {
entry,
htmlWebpackPlugins
};
};
const {entry, htmlWebpackPlugins} = setMPA();
module.exports = {
mode: 'development',
entry,
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].js'
},
plugins: [
...htmlWebpackPlugins
],
...
}
这里主要列出多页面打包配置的区别部分
然后修改package.json，增加打包命令：
"scripts": {
"test": "webpack",
"dev": "webpack --config webpack.dev.config.js",
"server": "webpack-dev-server",
"mpa": "webpack --config webpack.mpa.js"
},
执行打包命令
npm run mpa
查看生成的dist
img3
你会发现一个问题，html文件的title标签是空的？为什么呢？因为我们还没有写入<%= htmlWebpackPlugin.options.title %>
修改/src/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>
重新打包，再看dist目录下的list.html，title标签之间加了“list”
