文章目录
  1. 1. 为什么引入webpack?
  2. 2. webpack到底是什么?
  3. 3. webpack的工作流程理念
  4. 4. webpack的使用
    1. 4.1. install webpack
  5. 5. 分享源码demo

为什么引入webpack?

webpack到底是什么,怎么用,可能有人不是很清楚,但是绝对听说过。
套用俗语:“没吃过猪肉,也见过猪跑”。
webpack有多火,到Github逛逛便知,Github 上各大主流的项目都是基于webpack搭建。

奔着学海无涯的精神,尽管项目没用webpack,偶尔还是看了看。之前项目一直沿用gulp构建,人都有惰性,本人有时更甚之,懒于折腾,直到引入vue,.vue文件用webpack的vue-loader加载打包比较简单,加上想引入webpack的一些其他功能,至此不得不更改配置构建。

我们拥有两只脚,却不想走的更远,人性惫懒!

webpack到底是什么?

迫于天朝环境,打开度娘,输入webpack,然后轻敲回车。第一个就是webpack官网了,打开官网首页那张图很 简单粗暴直接的 向你说明了webpack到底是个什么样的存在。
如果之前你有模块化开发的经历,相信很容易看明白,webpack就是一模块加载器兼打包工具,就像一个皮包公司,任何资源都可以接受,然后经过一系列处理转化输出一个结果。这里是webpack api docs,英文不好的同学,可召唤度娘来帮忙。

webpack的工作流程理念

webpack真正牛逼之处在于玩配置,按照它的规则,你配置告诉webpack需要做什么,用什么做就万事大吉了,说起来简单,真要写好一个配置也不是一件容易的事,后面会详细说明如何写webpack配置文件。

下面列个对比表:

diff Gulp Webpack
pipe(流) 基本一个task一个pipe 共享一个pipe
模块 对模块的定义比较局限 各种资源(包括图片、样式、字体等)
构建 自己构建维护任务流 写好配置,等待结果( 比如打包、压缩混淆等)
插件 插件多 插件更完善,扩展好
watch refresh livereload 监听打包 热插拔(内存缓存机制)
more

当然,说这么多,并不是说gulp不好,相反gulp已经足够优秀,很多task必须依赖gulp来完成。
一种技术就在哪里,运用之妙,存乎一心

webpack的使用

目前,最迫切的就是装好webpack,先用来打包我的.vue 爽一把,直接上干货。

  • install webpack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
npm install webpack -g  #首先全局安装(注意权限问题,用sudo)
mkdir projectname && cd projectname #新建项目目录
npm init # 初始化自动创建package.json文件,一路默认回车即可
npm install webpack --save-dev #局部安装,写入依赖
/**
* packago.json 文件
*/
{
"name": "projectname",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^1.13.2"
}
}

至此webpack已正确安装,下篇具体讲解使用方法,基本命令行参数不做详细解释,直接从webpack.config.js配置文件开始。

分享源码demo

预览demo
vue + webpack + vue-router test demo源码
借用vue写的一个test程序,用vue作者的话说,用vue-router写一个spa应用简直易如反掌。

文章目录
  1. 1. 为什么引入webpack?
  2. 2. webpack到底是什么?
  3. 3. webpack的工作流程理念
  4. 4. webpack的使用
    1. 4.1. install webpack
  5. 5. 分享源码demo
顶部