浅谈如何使用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] };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。