说到自动化构建,你想到了什么?基于AMD的requirejs?还是基于commoJS的browserify?他们都在各自的领域或者说时代发挥了很重要的作用。
但是时代的变迁,webpack成了现在的佼佼者,我们不知道什么时候wepback也会被取代,但是现在我们必须要掌握。
我不担心我学完webpack新东西来了就没用了,相反的我很期待也很高兴有新的东西来取代webpack,因为如果能取代,必然是更好的东西。如果是更好的,那又为什么要拒绝呢?活在当下,认真学习。
一、基本简介
webpack和requirejs browserify一样,都是一款打包工具,那为什么要选这个?我们进行一个对比
1. requirejs
很老的产物了,它兴起的时候web模块化的标准都还没有完善。那个时候出了一款基于AMD的打包工具,
不得不说对前端的发展起到了至关重要的作用,如果它可以功成身退了。
2. browserify
是一个和webpack差不多同时代的产物,但是它只支持基于commonJS,对于AMD来说只能兴叹了。
并且它只支持打包js,如果你对这两个缺点不那么在意,那么就是它了。
3. webpack
支持AMD和commonJS,以模块化为起点,我们不仅可以用它打包js,也可以打包css,
包括图片。webpack把任何一个文件都看成一个模块,因此你准备好要迎接模块化的挑战了吗?
二、环境搭建
1. IDE推荐
IDEA
、webstrom
、sublime
、atom
都是很不错的编辑工具,idea
大而全,webstrom
是idea
的简化版、sublime
轻量但不失稳重、atom
新兴但不失典雅,东西不分上下,重在自己喜欢。找一个自己顺手的就好,顺便一提,我现在主要使用IDEA
、辅助atom
。因为我是一个java
党啊,少不了IDEA
,atom
的界面是我最喜欢的。
2. 开始建项目写配置
a.新建项目 mkdir webpack-study && cd webpack-study
b.初始化环境 npm init -y
c.安装工具(如果你没安装taobao源,把cnpm换成npm) npm install --save-dev webpack webpack-dev-server
说明:webpack是核心文件、wepback-dev-server是类http-server的web启动工具,建议安装一下这个server
d.新建配置文件 (名字一定不能换) touch webpack.config.js
配置webpack
module. exports ={
entry:'./index.js',
output:{
path:__dirname+'/dist',
filename:'bundle.js'
}
}
说明:
模块化module.export
入口文件:entry
有几个页面就有几个entry 如果是单页面(spa),一个entry就够了
输出 output
,path
是输出路径,__dirname
是nodejs的全局变量,表示当前目录, filename
,打包后的文件名
三、 写一个小测试
1. 新建入口文件并写入文件
vim index.js
document.write('Hello world');
2. 新建一个css
touch style.css
body{
background-color:pink;
}
3.新建一个html
touch index.html
写下以下内容
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello webpack</title>
<script src="dist/bundle.js"></script>
</head>
<body>
</body>
</html>
说明:
模块化module.export
入口文件:entry
有几个页面就有几个entry 如果是单页面(spa),一个entry就够了
输出 output
,path
是输出路径,__dirname
是nodejs的全局变量,表示当前目录, filename
,打包后的文件名
三、 写一个小测试
1. 新建入口文件并写入文件
vim index.js
document.write('Hello world');
2. 新建一个css
touch style.css
body{
background-color:pink;
}
3.新建一个html
touch index.html
写下以下内容
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello webpack</title>
<script src="dist/bundle.js"></script>
</head>
<body>
</body>
</html>
4.webpack的重头戏
那就是loaders,wepback的一大特色就是可以将一些浏览器不能原生支持的文件通过loaders编译成浏览器可以支持的文件
a.安装loaders npm install style-loader css-loader
b.打开webpack.config.js
添加模块
module:{
loaders:[
{
test:/\.css$/,
loaders:['style-loader','css-loader']
}
]
}
说明:
模块下定义大的loaders去loader需要的东西,它是一个数组,意味着它可以定义多个
一个对象就是一个loader,test
用正则匹配文件后缀
loaders指定采用哪个loader,注意它是从右往左执行,所以这里先执行css-loader css-loader
处理css的一些url,包括相对的绝对的之类的东西 style-loader
是将css文件采用js动态写入html页面
c.使用css
打开index.js
(因为我们这里没有用babel,所以就用es5来写)require('./style.css');
四、查看效果
我们现在可以使用webpack-dev-server
这个东西了
如果你己经全局安装了(cnpm install -g webpack-dev-server
),直接命令webpack-dev-server
就可以开起来了,当然你也可以在package.json文件里面添加script,文件如下
{
"name": "webpack-study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start":"webpack-dev-server --progress",
"build":"webpack --progress",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.23.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
}
}
这里我们就可以使用npm run build
来编译,使用npm run start
来开启服务器
➜ webpack-study git:(master) ✗ npm run build
> webpack-study@1.0.0 build /Users/xiaomo/workspace/webpack-study
> webpack --progress
Hash: 11ffef2911f2436a3948
Version: webpack 1.13.0
Time: 64ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./index.js 30 bytes {0} [built]
➜ webpack-study git:(master) ✗ npm run start
> webpack-study@1.0.0 start /Users/xiaomo/workspace/webpack-study
> webpack-dev-server --progcess
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /Users/xiaomo/workspace/webpack-study
Hash: 11ffef2911f2436a3948
Version: webpack 1.13.0
Time: 80ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
chunk {0} bundle.js (main) 30 bytes [rendered]
[0] ./index.js 30 bytes {0} [built]
webpack: bundle is now VALID.
b.然后访问 http://locahost:8080 就可以看到效果了
五、动态效果展示和总结
1. 总共有5个文件
webpack.config.ks
、index.js
、index.html
、style.css
、package.json
,编译好要使用的只有index.html
和dist/bundle.js
两个文件
2. gif动画
会展示一下5个文件的内容
3. 演示一下效果
如果觉得图小可以点击下面链接查看大图
webpack的简单使用
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。