文章目录

  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应用简直易如反掌。

webpack 教程 那些事儿01-webpack是什么的更多相关文章

  1. webpack 教程 那些事儿06-gulp+webpack多页

    本篇主要讲述用gulp+webpack构建多页应用 折腾到现在,项目还必须要进行,.vue文件必须要加载,也就是webpack必须引入.时间不多了,抛弃上个方案之后,只能牺牲热加载性能,用gulp+w ...

  2. webpack 教程 那些事儿04-webpack项目实战分析

    这节主要讲解真正项目用用到的 webpack配置问题,项目实战篇 就像我们不会完全做一个项目,不用别人的轮子一样.这个配置我们借用 vue-cli 搭建的配置来研究,因为它已经足够优秀. 有了前面的基 ...

  3. webpack 教程 那些事儿03-webpack两大精华插件,热加载

    本节主要讲述 webpack的两大经典开发调试插件,热插拔内存缓存机制 文章目录 1. html-webpack-plugin插件的使用 2. webpack-dev-middleware 插件登场 ...

  4. webpack 教程 那些事儿05-多页应用

    本篇主要关于如何用webpack构建多页应用 为什么要构建多页应用呢?因为我的项目本来就是多页应用啊至于为什么要用webpack?因为我要用vue啊,嫌gulp 每次打包慢 啊 文章目录 1. 利用v ...

  5. webpack 教程 那些事儿02-从零开始

    接着上篇我们有了最简单的安装了webpack的项目目录这节我们从零开始搭建一个简单的基于webpack的spa应用demo本节只说基础常用配置项,复杂后续讲解. 文章目录 1. 新建项目结构目录,如下 ...

  6. Webpack教程

    打开链接:Webpack教程

  7. Webpack教程二

    Webpack教程一 开发技巧 启用source-map 现在的代码是合并以后的代码,不利于排错和定位,只需要在config中添加 ... devtool: 'eval-source-map', .. ...

  8. [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)

    上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他 ...

  9. [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

    上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置 一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意 ...

随机推荐

  1. 高可用与负载均衡(1)之linux系统的数据链路层负载均衡

    preface 在蓝厂就职到时候,每台缓存服务器都能够跑到2G的流量,这么大的流量,有人会问,服务器是不是安装的万兆网卡,no no no,仅仅是3张千兆网卡绑定在一块.万兆网卡的服务器少见,大多数都 ...

  2. oneM2M

    http://www.ccsa.org.cn/organization/intro.php?org=oneM2M 一.成立背景 随着物联网技术研发及市场推广的不断深入,全球各通信标准化组织都在加强物联 ...

  3. BZOJ2286: [Sdoi2011]消耗战

    建出虚树dp. 把询问点按dfs序排序,用一个以dfs序为关键字的单调栈(以深度为关键字也是一样的),每次将一个询问点与栈顶的点的lca入栈,再将这个询问点入栈,在这个过程中建出一棵树就是虚树.具体看 ...

  4. 重新注册iis的.NET Framework版本

    说一个简单的方法,在VS2012.win7 sp1下亲测可用. 在开始菜单中找到VS 2012开发人员命令提示,然后执行命令:aspnet_regiis.exe -i 运行完成后截图如下:

  5. python设计模式之--单例模式

    python的单例模式就是一个类的实例只能自始自终自能创建一次.应用场景比如说数据库的连接池. #!/usr/bin/env python # coding=utf- class Foo(object ...

  6. 9月23日JavaScript作业----两个列表之间移动数据

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  7. eclipse自动部署问题

    1. 使用myeclipse自动部署的方法(使用myeclipse 2015自动部署有问题,待解决)(换成2014的便可以自动部署): 1.Window->preferences->Mye ...

  8. xutils 3.0 post 使用

    github:https://github.com/wyouflf/xUtils3 xUtils3简介 xUtils 包含了很多实用的android工具. xUtils 支持超大文件(超过2G)上传, ...

  9. Sencha Touch 2.2 Store Proxy 异常监控

    移动端到服务端通信往往会发生很多莫名的异常情况,如何有效的监控proxy异常,给用户友好的用户体验呢? Proxy给我提供了异常exception的监听事件,只需要监控该项目即可. Sencha To ...

  10. ie6下absolute:fixed问题,完美兼容

    普通css代码 .fix_foot{height: 30px; background: #ff0000; position: %; z-index:;} ie6兼容代码 * html,* html b ...