浅谈如何使用webpack构建多页面应用
前言
之前使用vue2.x+webpack3.x撸了一个vue单页脚手架
vue版spa脚手架
有兴趣的同学可以看下,内附详细注释,适合刚学习webpack的童鞋.
react版spa脚手架
但在一些场景下,单页应用显然无法满足我们的需求,于是便有了
mulXc-cli
好了,废话不多说,进入正题!!!!
文件结构
├──build构建服务和webpack配置 ├────build.js构建全量压缩包(打包项目) ├────setting.js多页面入口配置 ├────style.js页面1对1抽取生成css文件 ├────utils.js工具类 ├────webpack.base.conf.jswebpack通用配置 ├────webpack.dev.conf.jswebpack开发环境配置 ├────webpack.prod.conf.jswebpack生产环境配置 ├──configwebpack开发/生产环境部分配置 ├──dist项目打包目录 ├──package.json项目配置文件 ├──src项目目录 ├────common多页面公用方法与css ├────aboutabout页面 ├────homehome页面
思路
多页面应用,顾名思义:就是有多个页面(废话!!!)
从webpack的角度来看:
1.多个入口(entry),每个页面对应一个入口,理解为js资源.
2.多个html实例,webpack使用html-webpack-plugin插件来生成html页面.
3.每个页面需要对应的css文件.webpack使用extract-text-webpack-plugin抽取css.
这样我们一个多页面应用该有的东西都具备了,go,开撸!!!
入口配置与html页面生成
通过以上文件结构,我们可以找到我们在build/setting.js进行了多页面入口配置与html页面生成。
setting.js
//node文件操作模块
constfs=require('fs');
//node路径模块
constpath=require('path');
//使用node.js的文件操作模块来获取src文件夹下的文件夹名称->[about,common,home]
constentryFiles=fs.readdirSync(path.resolve(__dirname,'../src'));
//生成html文件插件
constHtmlWebpackPlugin=require('html-webpack-plugin');
//工具类提取_resolve方法
const{_resolve}=require('./utils');
//入口文件过滤common文件夹(因为common文件夹我们用来存放多页面之间公用的方法与css,所以不放入入口进行构建!)
constrFiles=entryFiles.filter(v=>v!='common');
module.exports={
//构建webpack入口
entryList:()=>{
constentryList={};
rFiles.map(v=>{
entryList[v]=_resolve(`../src/${v}/index.js`);
});
returnentryList;
},
//src文件夹下的文件夹名称->[about,common,home]
entryFiles:entryFiles,
//使用html-webpack-plugin生成多个html页面.=>[home.html,about.html]
pageList:()=>{
constpageList=[];
rFiles.map(v=>{
pageList.push(
newHtmlWebpackPlugin({
template:_resolve(`../src/${v}/index.html`),
filename:_resolve(`../dist/${v}.html`),
chunks:['common',v],
//压缩配置
minify:{
//删除Html注释
removeComments:true,
//去除空格
collapseWhitespace:true,
//去除属性引号
removeAttributeQuotes:true
},
chunksSortMode:'dependency'
})
);
});
returnpageList;
}
};
webpack.base.conf.js
//引入setting.js入口配置方法,与html生成配置
const{entryList,pageList}=require('./setting.js');
constbaseConf={
entry:entryList(),
plugins:[...pageList()]
};
css文件生成
通过以上文件结构,我们可以找到我们在build/style.js进行了css文件生成。
style.js
constpath=require('path');
//抽取css文件插件
constExtractTextPlugin=require('extract-text-webpack-plugin');
//引入入口配置
const{entryList,entryFiles}=require('./setting.js');
//多个ExtractTextPlugin实例
constplugins=[];
entryFiles.map(v=>{
plugins.push(
newExtractTextPlugin({
filename:`css/${v}.[contenthash].css`,
allChunks:false
})
);
});
module.exports={
//使用正则匹配到每个页面对应style文件夹下的css/less文件,并配置loader来进行解析.从而实现html<->css1对1
rulesList:()=>{
construles=[];
entryFiles.map((v,k)=>{
rules.push({
test:newRegExp(`src(\\\\|\/)${v}(\\\\|\/)style(\\\\|\/).*\.(css|less)$`),
use:plugins[k].extract({
fallback:'style-loader',
use:['css-loader','postcss-loader','less-loader']
})
});
});
returnrules;
},
//插件实例
stylePlugins:plugins
};
webpack.prod.conf.js
//引入方法
const{rulesList,stylePlugins}=require('./style.js');
constprodConf={
module:{
rules:[...rulesList()]
},
plugins:[...stylePlugins]
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。