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)));
})
网友评论