webpack多页面解决方案

• 1.问题
• 2.解决方案
• 2.1入口配置
• 2.2出口配置
• 2.3页面引用
• 2.4案例
• webpack.config.js文件相关配置
• 访问不同的页面

1.问题

一般的应用都是多页面，那么在webpack之中如何配置多页面呢

2.解决方案

2.1入口配置

webpack配置打包的入口允许我们可以打包多个文件，而且允许一个模块下面，可以有多个文件入口

module.exports = {
entry: {
index: ['./src/index.js', './src/utils/load.js'],
aboutUs: ['./src/aboutus.js'],
contactUs: ['./src/contactus.js','./src/utils/load.js'],
vendors: ['lodash']
}
}

2.2出口配置

我们既然配置了多入口，那么我们的出口，也不能配置单一，否则会出错的

webpack允许我们使用占位符的形式配置多个出口文件，这个出口文件[name]会根据打包的入口文件的名称来生成

2.3页面引用

不同的页面需要使用不同的js文件，所以我们需要安装

html-webpack-plugin

html-webpack-plugin

html-webpack-plugin

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
//入口
entry: {
main: path.join(__dirname, "./src/main.js"),
login:path.join(__dirname, "./src/js/login.js")
},

......
plugin
20000
s: [
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html",
chunks:['main']  // 通过chunks属性来指定对应页面的输出模块，对应这entry模块名
}),
new HtmlWebpackPlugin({
template: "./src/view/login.html",
filename: "login.html",
chunks:['login']	// 通过chunks属性来指定对应页面的输出模块，对应这entry模块名
}),
],
};

2.4案例

webpack.config.js文件相关配置

访问不同的页面