webpack 3.X学习之多页面打包
简介
我们开发不可能只写一个页面,每次都要写很多页面,这时为了开发效率,我们使用前端自动化工具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模块;
上面这种写法当然是没有问题,这是只有两个页面无所谓,那么有十个甚至更多呢,我们一直做着重复的事,这不是我们程序员的风格,我们就是为了能够偷懒才做程序员的不是吗?(当然还有高工资(#.#)),接下来我们来抽离这些重复的事;
首先,我们通过Node的glob对象,来获取我们存在的html或js;
/**
*
* @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工具;本人的水平比较有限,在书写的过程中,可能有很多说的比较模糊,请多多包涵,也请大神拍砖,多多指教
webpack 3.X学习之多页面打包的更多相关文章
- webpack多页面打包配置
单页面应用:整个应用里面只有一个html文件.现在主流的框架,vue,react都是单页面应用. 所以webpack绝大部分都是对单页面打包.那么webpack如何对多页面进行打包 index.htm ...
- webpack多页面应用打包问题-新增页面打包JS影响旧有JS资源
webpack多页面应用打包问题:如果在项目里新增页面,pages目录中插入一个页面文件,然后打包代码,在webpack3中,新增页面文件上方文件打包出来的JS文件内容全部会改变,点击查看比对,发现问 ...
- VUE 多页面打包webpack配置
思路:多配置一个main的文件,用于webpack入口使用, 然后路由的导向也应该默认指向新组件,最后通过webpack构建出一个新的独立的html文件. 缺点:生成多个html会new出多个vu ...
- webpack + vuecli多页面打包基于(vue-template-admin)修改
转: webpack + vuecli多页面打包基于(vue-template-admin)修改 遇见的问题TypeError: Cannot read property 'tap' of undef ...
- 深入学习rollup来进行打包
深入学习rollup来进行打包 阅读目录 一:什么是Rollup? 二:如何使用Rollup来处理并打包JS文件? 三:设置Babel来使旧浏览器也支持ES6的代码 四:添加一个debug包来记录日志 ...
- vue第二单元(webpack的配置-学习webpack的常用配置)
第二单元(webpack的配置-学习webpack的常用配置) #课程目标 掌握webpack的常用配置 掌握如何根据实际的需求修改webpack的对应配置 了解webpack-dev-server的 ...
- webpack对多个模块依赖进行打包
[ webpack3.0.0刚刚出来 所以文章是跟着低版本 教程 操作熟悉 结果好多对不上喔] 七:webpack对多个模块依赖进行打包 通过一刚开始我们了解到 webpack支持commonJS ...
- webpack快速入门——配置JS压缩,打包
1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugin ...
- webpack快速入门——实战技巧:优雅打包第三方类库
下面说两种方法: 一. 1.引入jQuery,首先安装: cnpm install --save jquery 2.安装好后,在我们的entry.js中引入: import $ from 'jquer ...
随机推荐
- mysql数据库表卡死解决方法
---恢复内容开始--- 问题引起原因: 由于在执行大量插入操作的时候意外终止程序之后, MySQl的线程并没有被终止,导致表不能打开和操作 - 解决思路就是找到等待的线程并kill -- 查看所有 ...
- Fielddata is disabled on text fields by default. Set fielddata=true on [gender] in order to load fielddata in memory by uninverting the inverted index. Note that this can however use significant memor
ES进行如下聚合操作时,会报如题所示错误: ➜ Downloads curl -XPOST 'localhost:9200/bank/_search?pretty' -d ' { "size ...
- PHP防止SQL注入和XSS攻击
PHP防止SQL注入和XSS攻击PHP防范SQL注入是一个非常重要的安全手段.一个优秀的PHP程序员除了要能顺利的编写代码,还需要具备使程序处于安全环境下的能力.说到网站安全,就不得不提到SQL注入( ...
- 构建Nginx均衡LAMP高性能服务器
LNAMP(Linux+Nginx+Apache+Mysql+PHP)架构受到很多IT企业的青睐,取代了原来认为很好的LNMP(Linux+Nginx+Mysql+PHP)架构,那我们说LNAMP到底 ...
- 来个Button看一看
0.目录 1.前言 2.基本属性与方法 3.点点更健康 4.我的Button有点多 5.震惊!TextView竟然... 1.前言 每次写代码总会忘记一些东西,又要重新Goooooooooogle,好 ...
- 网页设计——2. html入门
开始正式的课程讲解了,首先来看看课程体系: Java EE(java 企业应用程序版本) java2 有三个版本:J2 SE(标准版),J2 EE(企业版).J2 ME(微缩版). 我们要掌握J2EE ...
- Redis入门篇
一.Redis简介: Redis(http://redis.io)是一款开源的.高性能的键-值存储(key-value store),它是用ANSI C来编写.Redis的项目名是Remote Dic ...
- Flask-admin 笔记一 (快速启用)
1,快速启用 1) 安装flask-admin pip install flask-admin 2) 配置使用 from flask import Flask from flask_admin i ...
- java poi 导入日期为空
如上两图,如果是第一种的话,可以导入,,但,如果是第二种的话,导入为空查看,导入的文件,有这么一条 debugger发现 它把2017-11-01转为Double,转不了,出错了,所以,我在catch ...
- iOS_应用程序的生命周期
每个iPhone程序都包括唯一一个UIApplication对象,它管理整个程序的生命周期,从载入第一个显示界面開始,而且监听系统事件.程序事件调度整个程序的运行. int main(int argc ...