Webpack
Webpack是时下最流行的模块打包器
它的主要任务就是将各种格式的JavaScript代码,甚至是静态文件
进行分析、压缩、合并、打包,最后生成浏览器支持的代码
特点:
- 代码拆分方案:webpack可以将应用代码拆分成多个块,每个块包含一个或多个模块,块可以按需异步加载,极大提升大规模单页应用的初始加载速度
- 智能的静态分析:webpack的智能解析器几乎可以处理任何第三方库
- Loader加载器:webpack只能处理原生js模块,但是loader可以将各种资源转换为js模块
- plugin插件:webpack有功能丰富的插件系统,满足各种开发需求
- 快速运行:webpack 使用异步 I/O 和多级缓存提高运行效率,使得它能够快速增量编译
不过它也有自己的缺点
配置过于复杂;如果使用不当(比如过度优化),会产生难以预料的问题
但是瑕不掩瑜,它仍是优秀的前端自动化构建工具
安装
webpack是使用Node.js开发的工具,可通过npm(node.js的包管理工具)进行安装
我们可以去Node.js官网下载
我的电脑是Windows×64位操作系统,那么我就点击Windows Installer 64-bit下载
下载安装完毕后我们可以打开命令提示符检测一下
使用Win+R快捷键,输入cmd打开命令行
输入:node -v
显示了node版本6.2
这就证明我们安装成功了
准备
下面我们要做的是在全局安装webpack
因为大部分情况我们需要已命令行工具的形式使用webpack,所以安装在全局更方便(-g)
输入:npm install webpack -g
安装完毕后我们需要手动构建项目文件
现在我在桌面上新建了一个项目文件夹demo
内部很简单,一个网页index.html和一个用来放资源的文件夹
下面我们还要配置package.json项目文件
一个很简单的方式就是利用npm自动创建
现在将命令符引导到我们项目的根路径
(如果下载了Git,可以直接在桌面git bash)
输入:npm init
(最好将webpack也作为项目依赖安装到项目中,而不限于全局,官方推荐,方便引用 npm install webpack
)
输入这个命令后,会让你输入项目名称、项目描述等等
由于我们不需要发布,这些都不重要,所以我们直接回车默认就可以了
完毕后我们就会发现文件根目录下多了一个文件
有了package.json,webpack才能管理好模块之间的依赖关系
文件
下面做一个十分简单的页面
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
css中我们为p标签添加样式
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
greet.js中引入模块,创建p标签
- 1
- 2
- 3
- 1
- 2
- 3
入口文件中将p标签添加到页面
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
html值只是简单的引入脚本
不过此时它还不存在
它是我们要使用webpack将会生成的文件
上面的依赖关系用图片来展示就是个这个样子地
配置文件
仅仅做了这些还不够
我们还有一个最重要的步骤没有完成——编写webpack配置文件
在项目根目录下创建一个文件webpack.config.js
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
entry是项目的入口文件
output是构建项目输出结果的描述,本身为对象
- path:输出目录
- publicPath:输出目录对应外部路径(从浏览器中访问)
- filename:输出文件名
publicPath其实是很重要的配置,它表示构建结果最终被真正访问的路径
但在我们的demo中,直接通过相对路径访问静态资源,不涉及打包上线CDN,所以没那么重要
加载器
要想使用loaders就必须安装
为了让我们不用在所有文件中都重复的引用加载器
我们还需要在webpack.config.js下的module中添加配置信息
形式参考上面的代码
它有以下配置选线:
- test(必选):匹配loaders处理文件拓展名的正则表达式
- loader(必选):加载器名称
- include/exclude(可选):手动添加必须处理的文件或屏蔽不需要处理的文件;
- query(可选):为加载器提供额外设置选项
babel-loader
Babel是一种多用途的编译器,通过它我们可以:
- 使用浏览器没有完全支持的新标准(ES6、ES7)
- 使用基于JavaScript拓展的语言(React JSX、CoffeeScript…)
Babel是几个模块化的包,其核心功能位于babel-core的npm包中
每一个功能的拓展包,都需要我们单独下载
比如解析Es6的babel-preset-es2015包
解析JSX的babel-preset-React包
我们可以在命令行中统一下载它们 npm install + 要下载的包(多个包用空格隔开)
输入:npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
(我们的demo中可能用不到这些加载器,我是为了演示)
注:–save命令可以把信息自动写进package.json的dependencies字段
–save-dev可以写入到devDependences中
(dependencies表示在生产环境中需要依赖的包,DevDependencies表示仅在开发和测试环节中需要依赖的包)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
注意我的注释,‘-loader’是可以省略的
css-loader
css-loader使我们能够利用@import 和 url(…)替代 require()
style-loader将计算后的样式加入页面中
二者组合在一起使我们能够把css嵌入webpack打包后的js文件中(style标签中)
在命令行中下载
输入:npm install css-loader style-loader --save-dev
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
使用“!”可以加载并列的加载器
url-loader
webpack中一切都是模块,包括JavaScript,包括css,也包括图片等静态资源
为了将图片资源变成模块,我们需要url-loader(将图片转换为base64),它还依赖file-loader
所以都需要下载
输入:npm install url-loader file-loader --save-dev
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
上面的limit=8192意思是不大于8KB(1024×8)的图片才会被打包处理为base64的图片
打包监听
完成了配置文件
在命令行输入webpack -w
可以打包我们的文件并且时刻监控我们的文件
(如果仅仅想打包就输入webpack
命令)
一旦发生变化(Ctrl+S保存后),立刻重新打包
(ps:若想在命令行取消监听,使用Ctrl+C)
出现了这些,表示打包成功了
回到我们的文件夹,我们发现out文件夹由webpack自动生成了
node-modules内部装的就是我们刚刚下载的那些loaders
页面中也成功显示了hello world