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)));
})