介绍├──,build ,,,,,,,,,,,构建服务和webpack配置
,├────,build.js ,,,,,,,,构建全量压缩包,(打包项目)
,├────,setting.js ,,,,,,,多页面入口配置
,├────,style.js ,,,,,,,,页面1对1抽取生成css文件
,├────,utils.js ,,,,,,,,工具类
,├────,webpack.base.conf.js ,, webpack通用配置
,├────,webpack.dev.conf.js ,,, webpack开发环境配置
,├────,webpack.prod.conf.js ,, webpack生产环境配置
├──,config ,,,,,,,,,, webpack开发/生产环境部分配置
├──,dist ,,,,,,,,,,,项目打包目录
├──,package.json ,,,,,,,项目配置文件
├──,src ,,,,,,,,,,,,项目目录
├────,common ,,,,,,,,,多页面公用方法与css
├────,about ,,,,,,,,,,关于页面
├────,home ,,,,,,,,,,回家页面 //node 文件操作模块
const fs =,要求(& # 39;fs # 39;);//node 路径模块
const path =,要求(& # 39;path & # 39;);//使用node.js 的文件操作模块来获取src文件夹下的文件夹名称,→(常见,回家)
const entryFiles =, fs.readdirSync (path.resolve (__dirname, & # 39; . ./src # 39;));//生成html文件插件
const HtmlWebpackPlugin =,要求(& # 39;html-webpack-plugin& # 39;);//工具类提取_resolve方法
{const _resolve },=,要求(& # 39;。/跑龙套# 39;);//入口文件过滤常见的文件夹(因为常见的文件夹我们用来存放多页面之间公用的方法与css,所以不放入入口进行构建!)
const rFiles =, entryFiles.filter (v =祝辞,v !=, & # 39;常见# 39;);
module.exports =, {
,//构建webpack入口
,entryList:(),=祝辞,{
const 才能;entryList =, {};
rFiles.map才能(v =祝辞,{
,,entryList [v],=, _resolve (“. ./src/$ {v}/index.js ');
,,});
return 才能;entryList;
},
,//src文件夹下的文件夹名称,→(常见,回家)
,entryFiles: entryFiles,
,//使用html-webpack-plugin生成多个html页面。=祝辞(home, about.html)
,pageList:(),=祝辞,{
const 才能;pageList =, [];
rFiles.map才能(v =祝辞,{
,,pageList.push (
,,,new HtmlWebpackPlugin ({
,,,,模板:,_resolve (“. ./src/$ {v}/index . html),
,,,,文件名:,_resolve (“. ./dist/$ {v} . html”),
,,,,块:,(& # 39;常见# 39;,,v),
,,,,//压缩配置
,,,,贬低:,{
,,,,,//删除Html注释
,,,,,removeComments:,真的,
,,,,,//去除空格
,,,,,collapseWhitespace:,真的,
,,,,,//去除属性引号
,,,,,removeAttributeQuotes:真实
,,,,},
,,,,chunksSortMode:, & # 39;依赖# 39;
,,,})
,,);
,,});
return 才能;pageList;
,}
}; //引入setting.js 入口配置方法,与html生成配置
const {entryList的不同之处是,pageList },=,要求(& # 39;。/setting.js& # 39;);
const baseConf =, {
,条目:entryList (),
,插件:[…pageList ())
};
小编给大家分享一下使用webpack构建多页面应用的案例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强>前言
之前使用vue2。x + webpack3。x撸了一个vue单页脚手架
vue版spa脚手架
有兴趣的同学可以看下,内附详细注释,适合刚学习webpack的童鞋。
反应版spa脚手架
但在一些场景下,单页应用显然无法满足我们的需求,于是便有了
mulXc-cli
好了,废话不多说,进入正题! ! ! !
<强>文件结构,
<强>思路
多页面应用,顾名思义:就是有多个页面(废话! ! !)
<强>从webpack的角度来看:
1。多个入口(条目),每个页面对应一个入口,理解为js资源。
2。多个html实例,webpack使用html-webpack-plugin插件来生成html页面。
3。每个页面需要对应的css文件。webpack使用extract-text-webpack-plugin抽取css。
这样我们一个多页面应用该有的东西都具备了,走了,开撸! ! !
<>强入口配置与html页面生成
通过以上文件结构,我们可以找到我们在构建/设置。js进行了多页面入口配置与html页面生成。
设置。js
webpack.base.conf。js
css文件生成
