简介
我们开发不可能只写一个页面,每次都要写很多页面,这时为了开发效率,我们使用前端自动化工具webpack,那么webpack是如何打包页面的呢?又是如何打包多页面的呢?
单页面打包
我们知道要打包单页面的方法,很简单,配置入口,和html插件,
const HtmlWebpackPlugin = require('html-webpack-plugin'); const config = { entry:{ index:'./src/index.js' }, output:{ path: path.join(__dirname, 'dist'), filename: 'js/index.js' } ... plugins:[ new HtmlWebpackPlugin({ filename: 'index.html', template: './src/index.html', hash: true, minify: { removeAttributeQuotes:true, removeComments: true, collapseWhitespace: true, removeScriptTypeAttributes:true, removeStyleLinkTypeAttributes:true } }) ] }
上面的配置就是打包一个单页面的代码,具体配置项的意思请参考HTMLWebpackPlugin;
如何打包多页面
在学了webpack之后,我的感受是我会配置webpack了,也能运行了,但是学习的过程中都是单页面的,那么多页是如何打包的呢?其实多页面的打包和单页面的打包的原理是一样的,只是多配置几个对应的入口,和出口,以及HtmlWebpackPlugin对象;当然你完全可以像下面这样:
const config = { entry:{ index:'./src/index.js', info:'./src/index.js' }, output:{ path: path.join(__dirname, 'dist'), filename: 'js/[name].js' } ... plugins:[ new HtmlWebpackPlugin({ filename: 'index.html', template: './src/index.html', chunks:['index'], hash: true, minify: { removeAttributeQuotes:true, removeComments: true, collapseWhitespace: true, removeScriptTypeAttributes:true, removeStyleLinkTypeAttributes:true } }), new HtmlWebpackPlugin({ filename: 'info.html', template: './src/info.html', hash: true, chunks:['info'], minify: { removeAttributeQuotes:true, removeComments: true, collapseWhitespace: true, removeScriptTypeAttributes:true, removeStyleLinkTypeAttributes:true } }) ] }
细心的你肯定发现我改变了几个地方,一是,把output.filename的‘js/index.js'变成了‘js/[name].js',这是因为我们是多页面,每个页面对应相应的js这样方便管理,二是,在HtmlWebpackPlugin对象中添加了chunks这个属性,chunk属性是让你选择对应的js模块;
上面这种写法当然是没有问题,这是只有两个页面无所谓,那么有十个甚至更多呢,我们一直做着重复的事,这不是我们程序员的风格,我们就是为了能够偷懒才做程序员的不是吗"htmlcode">
/** * * @param {string} globPath 文件的路径 * @returns entries */ function getView(globPath,flag){ let files = glob.sync(globPath); let entries = {}, entry, dirname, basename, pathname, extname; files.forEach(item => { entry = item; dirname = path.dirname(entry);//当前目录 extname = path.extname(entry);//后缀 basename = path.basename(entry, extname);//文件名 pathname = path.join(dirname, basename);//文件路径 if (extname === '.html') { entries[pathname] = './' + entry; } else if (extname === '.js') { entries[basename] = entry; } }); return entries; }
既然,我们已经有了getView()函数,可以获取html和js文件,那么我们就可以确定有多少个入口,和多少个页面;
let entriesObj = getView('./src/js/*.js');
let config = { entry:entriesObj, ... }
上面我们就配置好了入口,不需要我们手动添加了,有多少js就有多少入口;
let pages = Object.keys(getView('./src/*html')); pages.forEach(pathname => { let htmlname = pathname.split('src\\')[1]; let conf = { filename: `${htmlname}.html`, template: `${pathname}.html`, hash: true, chunks:[htmlname], minify: { removeAttributeQuotes:true, removeComments: true, collapseWhitespace: true, removeScriptTypeAttributes:true, removeStyleLinkTypeAttributes:true } } config.plugins.push(new HtmlWebpackPlugin(conf)); });
最后,我们获取HTML页面,和添加对应页面的HTMLWebpackPlugin对象;
后记
通过以上的三个步骤,就可以配置好一个可以打包多页面的webpack工具;本人的水平比较有限,在书写的过程中,可能有很多说的比较模糊,请多多包涵,也请大神拍砖,多多指教
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 孙悦.1996-伙伴【正大国际】【WAV+CUE】
- 纪钧瀚《钢琴阅读时光 雨中书店聆听轻音乐》[FLAC/分轨][399.62MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[320K/MP3][87.4MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[FLAC/分轨][184.94MB]
- 陈慧娴.2018-Priscilla-Ism演唱会3CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郑秀文.1999-我应该得到(国)【华纳】【WAV+CUE】
- 陈家慧.2011-钢琴酒吧2CD【龙吟唱片】【WAV+CUE】
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[320K/MP3][45.01MB]
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[FLAC/分轨][109.13MB]
- 赞多《序章》[320K/MP3][45.54MB]
- 许巍.2004-每一刻都是崭新的【步升大风】【WAV+CUE】
- 群星.2024-四方馆影视原声带【韶愔音乐】【FLAC分轨】
- 陈雷.1997-安锁咧【金圆唱片】【WAV+CUE】
- 关淑怡.2013-MY.FAVORITE.SK.3CD【环球】【WAV+CUE】
- Sweety.2006-花言乔语【丰华】【WAV+CUE】