webpack4.x从0开始构建多页项目(二)-多页实现

webpack4.x从0开始构建多页项目(一)-项目说明.

webpack4.x从0开始构建多页项目(二)-多页实现.

webpack4.x从0开始构建多页项目(三)-插件及loader配置.

配置多页的主要方法

动态配置多页面需要在公共配置中引入glob

const glob = require("glob"); //glob，这个是一个全局的模块，动态配置多页面会用得着

1. 获取html-webpack-plugin参数的方法

let getHtmlConfig = function (name, chunks) {return {template: `./src/pages/${name}/index.html`,filename: `${name}.html`,inject: true,hash: true, //开启hash  ?[hash]chunks: chunks,minify: process.env.NODE_ENV === "development" ? false : {// removeComments: true, //移除HTML中的注释// collapseWhitespace: true, //折叠空白区域 也就是压缩代码// removeAttributeQuotes: true, //去除属性引用},};
};

2. 动态添加入口

function getEntry(PAGES_DIR) {var entry = {};//读取src目录所有page入口glob.sync(PAGES_DIR + '**/*.js').forEach(function (name) {var start = name.indexOf('pages/') + 4;var end = name.length - 3;var eArr = [];var n = name.slice(start, end);n = n.split('/')[1];eArr.push(name);eArr.push('babel-polyfill');entry[n] = eArr;})return entry;
}let entrys = getEntry('./src/pages/');

3. htmlWebpackPlugin生成多页页面

var htmlArray = [];
Object.keys(entrys).forEach(function (element) {htmlArray.push({_html: element,title: '',chunks: ['vendor', 'commons', element]})
})//自动生成html模板
htmlArray.forEach((element) => {module.exports.plugins.push(new htmlWebpackPlugin(getHtmlConfig(element._html, element.chunks)));
})

4.使用html-loader实现页面公共部分复用的功能

npm i -D html-loader

在对应页面的添加代码如下:

//html-loader!表示仅仅在这串代码使用html-loader解析
<%= require('html-loader!./common.html') %>

注意：在webpack-config.js中添加如下代码的这种方式会报错；
webpack-html-plugin跟html-loader冲突,我把webpack-html-plugin的模板设置成html, 就不能使用html-loader解析html文件.

{test: /\.(html)$/,use: {loader: 'html-loader'}}//在需要的页面引入
<%= require(./common.html') %>

完整的webpack.base.conf.js文件

const path = require('path');
const webpack = require("webpack");
const glob = require("glob"); //glob，这个是一个全局的模块，动态配置多页面会用得着
// html模板
const htmlWebpackPlugin = require("html-webpack-plugin");
//静态资源输出
const copyWebpackPlugin = require("copy-webpack-plugin");
//消除冗余的css
const purifyCssWebpack = require("purifycss-webpack");// 获取ruls
const rules = require("./webpack.rules.conf.js");// 获取html-webpack-plugin参数的方法
let getHtmlConfig = function (name, chunks) {return {template: `./src/pages/${name}/index.html`,filename: `${name}.html`,inject: true,hash: true, //开启hash  ?[hash]chunks: chunks,minify: process.env.NODE_ENV === "development" ? false : {// removeComments: true, //移除HTML中的注释// collapseWhitespace: true, //折叠空白区域 也就是压缩代码// removeAttributeQuotes: true, //去除属性引用},};
};//动态添加入口
function getEntry(PAGES_DIR) {var entry = {};//读取src目录所有page入口glob.sync(PAGES_DIR + '**/*.js').forEach(function (name) {var start = name.indexOf('pages/') + 4;var end = name.length - 3;var eArr = [];var n = name.slice(start, end);n = n.split('/')[1];eArr.push(name);eArr.push('babel-polyfill');//引入这个，是为了用async await，一些IE不支持的属性能够受支持，兼容IE浏览器用的entry[n] = eArr;})return entry;
}
let entrys = getEntry('./src/pages/');module.exports = {entry: entrys,module: {rules: [...rules]},plugins: [//静态资源输出new copyWebpackPlugin([{from: path.resolve(__dirname, "../src/assets"),to: './assets',ignore: ['.*']}]),// 消除冗余的css代码new purifyCssWebpack({paths: glob.sync(path.join(__dirname, "../src/pages/*/*.html"))}),],optimization: {splitChunks: {  //分割代码块cacheGroups: {  //缓存组 缓存公共代码commons: {  //公共模块 name: "commons",chunks: "initial",  //入口处开始提取代码minSize: 0,      //代码最小多大，进行抽离minChunks: 2,    //代码复 2 次以上的抽离},vendor: {   // 抽离第三方插件test: /node_modules/,   // 指定是node_modules下的第三方包chunks: 'initial',name: 'vendor',  // 打包后的文件名，任意命名    // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包priority: 10},}}},
}//修改自动化配置页面
var htmlArray = [];
Object.keys(entrys).forEach(function (element) {htmlArray.push({_html: element,title: '',chunks: ['vendor', 'commons', element]})
})//自动生成html模板
htmlArray.forEach((element) => {module.exports.plugins.push(new htmlWebpackPlugin(getHtmlConfig(element._html, element.chunks)));
})