webpack多页面打包

示例项目结构

 |--- src|--- |--- components|--- |--- pages|--- |--- |--- about|--- |--- |--- |--- index.html|--- |--- |--- |--- index.js|--- |--- |--- index|--- |--- |--- |--- index.html|--- |--- |--- |--- index.js|--- |--- utils|--- |--- |--- fileTree.js|--- |--- index.html|--- |--- main.js|--- package.json|--- webpack.config.js|--- webpack.config1.js

单页面打包

module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, './dist'),filename: 'bundle.js'}
};

多页面打包

webpack.config1.js

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");const config = {mode: "development",entry: {index: path.join(__dirname, "src/pages/index/index.js"),about: path.join(__dirname, "src/pages/about/index.js"),},output: {path: path.join(__dirname, "dist"),filename: "js/[name]_[contenthash:8].js",clean: true,},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({filename: "index.html", // 不指定名称会报错: ERROR in Conflict: Multiple assets emit different content to the same filenametemplate: path.join(__dirname, "src/pages/index/index.html"),chunks: ["index"], // 指定chunks防止所有页面的js都注入到html}),new HtmlWebpackPlugin({filename: "about.html",template: path.join(__dirname, "src/pages/about/index.html"),chunks: ["about"],}),],
};module.exports = config;

webpack -c webpack.config1.js
思考: 如果有更多的模块要单独打包怎么办? 重复的配置HtmlWebpackPlugin, 不如自动化处理

多页面打包优化配置(glob遍历)

webpack -c webpack.config.js

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { glob } = require("glob");// js入口配置
const entryMap = {};
// HtmlWebpackPlugin插件配置
const plugins = [];// 遍历pages目录下子目录的index.html
glob.sync(path.join(__dirname, "src/pages/**/index.html")).forEach((file) => {// 模块名称(index, about...)const name = file.match(/\/pages\/(.+)\/index.html/)[1];entryMap[name] = file.replace(".html", ".js");plugins.push(new HtmlWebpackPlugin({filename: `${name}.html`, // 不能使用"[name].html"template: file, // 模板路径chunks: [name],hash: true,}));
});const config = {mode: "development",entry: entryMap,output: {path: path.join(__dirname, "dist"),filename: "js/[name]_[contenthash:8].js",clean: true,},plugins: [new CleanWebpackPlugin(), ...plugins],
};module.exports = config;

webpack

打包后的dist文件结构

 |--- about.html|--- index.html|--- js|--- |--- about_e75baef3.js|--- |--- index_ff2c735b.js

附加: 生成目录树

fileTree.js

//打印目录树
const fs = require("fs");
const path = require("path");
//路径参数
let pathParams = process.argv[2];
if (!pathParams) {// 默认项目当前目录pathParams = "./";
}
//转成绝对路径
pathParams = path.resolve(pathParams);
// 文件夹层级
let level = 0;// 需要排除的目录
let excludes = ["node_modules", "dist"];// 遍历文件夹
function visitDir(pathParams) {if (fs.statSync(pathParams).isFile()) {// 文件console.log(getRetractionCharts(level), getName(pathParams));return;}// 文件夹console.log(getRetractionCharts(level), getName(pathParams));let fileList = fs.readdirSync(pathParams);// 进入文件夹level++;const dirList = fileList.filter((e) => {return !isFile(pathParams, e);});for (let i = 0; i < dirList.length; i++) {if (excludes.includes(dirList[i])) {continue;}visitDir(path.join(pathParams, dirList[i]));}// 文件放后面fileList.filter((e) => {return isFile(pathParams, e);}).forEach((e) => {visitDir(path.join(pathParams, e));});//返回上一级level--;
}//生成等比的文件间隔符
function getRetractionCharts(index) {if (index === 0) {return "";}let str = "";for (let i = 0; i < index; i++) {str += " |---";}return str;
}//返回目录名，或者文件名
function getName(pathParams) {return path.parse(pathParams).base;
}function isFile(pathParams, e) {const p = path.join(pathParams, e);return fs.statSync(p).isFile();
}//指定生成目录树
console.log(pathParams);
visitDir(pathParams);

node src/utils/fileTree.js
输出

 |--- src|--- |--- components|--- |--- pages|--- |--- |--- about|--- |--- |--- |--- index.html|--- |--- |--- |--- index.js|--- |--- |--- index|--- |--- |--- |--- index.html|--- |--- |--- |--- index.js|--- |--- utils|--- |--- |--- fileTree.js|--- |--- index.html|--- |--- main.js|--- package.json|--- webpack.config.js|--- webpack.config1.js

webpack多页面打包相关推荐

webpack文件夹打包_webpack多入口文件页面打包详解
本文主要介绍了webpack多入口文件页面打包配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望帮助到大家. 大多数情况下,我们使用 webpack来打包单页应 ...
webpack配置排除打包
目标1:webpack配置排除打包-打包瘦身通过配置vue-cli把一些平常不需要用的包排除在打包文件之外. 例如:让 webpack 不打包 vue xlsx 和 element 使用方式先找到 ...
vue 多页面打包配置
因为我们公司的项目是多页面应用,不同于传统单页面应用,一个包就可以了.我们必须要分模块打包,因此特意研究了下webpack,然后整理了一下多页面打包的逻辑. 1.首先,用vue-cli搭好基本的项目结 ...
一篇弄懂webpack静态资源打包器
认识 webpack是优秀的前端构建工具,静态资源打包器,可以根据模块依赖关系进行静态资源分析,快速打包生成相对应浏览器可以直接识别的静态资源! 环境 1)node环境 2)vs code编辑器规约 ...
webpack 打包html中css样式如果处理,webpack中单独打包css样式
这次给大家带来webpack中单独打包css样式,webpack中单独打包css样式的注意事项有哪些,下面就是实战案例,一起来看一下. 零.介绍以下是个人项目中总结出来的一些基本知识,记录在这里,加 ...
webpack实现ssr打包
webpack实现ssr打包知识点技术栈:React, webpack, express 概念目的原理实现 react组件 express webpack 事件代码学习链接: https ...
vue cli4 vue2 多页面打包配置与坑点
前言: 一直以来都没用上多页面打包,这次遇到个业务特殊情况,想到用多页面打包的方案来解决,于是按照vue cli 官方文档在自己的项目上配置跑了一下,果然一跑就是一堆问题.只能说事情总是比我们想象的要 ...
vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下一.首先修改c ...
nginx配置解决vue单页面打包文件大，首次加载慢的问题
nginx配置解决vue单页面打包文件大,首次加载慢的问题参考文章: (1)nginx配置解决vue单页面打包文件大,首次加载慢的问题 (2)https://www.cnblogs.com/golo ...

webpack多页面打包

示例项目结构

单页面打包

多页面打包

多页面打包优化配置(glob遍历)

打包后的dist文件结构

附加: 生成目录树

webpack多页面打包相关推荐

最新文章

热门文章