一、webpack学习
1.1 前端工程化概述
在前端开发的初始阶段,开发者通常只用关心html,css,javascript。但由于
项目变得越来越大
迭代更新越来越频繁
团队合作越来越多紧密
对编程体验要求越来越高
逐步形成了很多“最佳实践”。有很多免费的工具都可以使用。这些工具都是依赖Node.js的。
包管理工具:依赖越来越复杂(实际上没有那么复杂),所以此时就利用bower和npm可以有效管理依赖。package.json文件和bower.json文件很好用,可以看见项目的后台依赖、前端依赖。
脚手架:现在的项目结构挺复杂,比如react+angular就要配半天,所以为了方便你起步,出现了yeman、slush。
前端工作流工具:比如gulp、grunt,这两个工具可以用gulp.config.js文件或者grunt.config.js文件列出清单,让这两个工具做什么,比如混淆一个js文件,合并多个js文件,他们都是用task数组表示工程一件事儿、一件事儿自动帮我们做。编译less也能自动watch观测less的改变,自动生成css文件。
预处理编译工具:比如less的编译用lessc,sass的编译用sass,jsx的编译用babel。他们都可以提交给gulp、grunt来自动完成编译。
模块编译工具:webpack是一个本质上是一个CMD模块编译工具,就是把多个具有import、require、export写出来的模块可以编译为普通浏览器能够识别的普通JavaScript程序。里面集成loader的东西,让webpack可以一统babel、lessc、sass、jpg压缩等等。webpack越来越强大,甚至拥有了工作流的功能,比如合并js、压缩个js等等。
代码测试工具:大公司、大项目在用。
1.2 初识webpack
网页打包工具,webpack。依赖nodejs的,所以机器上要安装nodejs。
webpack把零散的js文件、less文件、图片文件,打包成为一个bundle。
我们需要让机器上有webpack工具,此时就要在全局路径下安装webpack
1 | npm install webpack -g |
我们来测试webpack到底干嘛用的,所以我们建立c:\test文件夹。
我们创建一个a.js文件:
1 | alert("你好webpack!"); |
此时cd c:\test里面,然后:
1 | webpack a.js dist.js |
然后做一个页面,引入dist.js文件:
1 |
|
此时能够弹出alert框。dist文件是这样的:
此时webpack帮我们进行了打包,进行了CMD规范的处理。
我们再来一个案例,进行升级。此时a文件用CMD规范,类似NodeJS的语法来对b进行引用。
a.js文件:
1 | var b = require("./b"); |
b.js文件
1 | exports.fn = function(){ |
此时
1 | webpack a.js dist.js |
并没有b的事儿,但是webpack看见了a再引用b,此时就把b就一并打包进去了。此时IE6都能运行刚才的程序。
webpack最恐怖的就是它颠覆了我们用前端框架的模式,比如jQuery,此时只需要
1 | npm install jquery |
然后主入口文件(a.js)里面1
var $ = require("jquery");
此时jQuery也会被编译到dist.js文件中。一个项目如果使用webpack,此时就能裸写CMD规范代码。
1.3 使用文件来配置webpack
写一个文件,告诉webpack你要做什么。
项目的根目录要放置webpack.config.js文件,告诉webpack你的任务是什么。
src文件夹中存放源文件,dist是我们准备放置生成的bundle文件。
webpack.config.js文件里面,要定义入口和出口:
1 | var path = require("path"); |
加载器loader也是非常重要的配置项,webpack是一个海纳百川的工具,所以就要能够接纳一些其他工具,比如babel可以编译jsx文件, 此时webpack就让他开发一个针对webpack的插件,叫做-loader。
1 | cnpm install babel-loader |
改变webpack.config.js文件:
1 | var path = require("path"); |
如果要处理less、sass此时就要使用他们的loader
完整的webpack.config.js
1 | var path = require("path"); |
相当于解析ES2016和jsx文件是babel的能力,一定要记住先安装
1 | cnpm install babel-core |
1.4 开发中的依赖
package.json文件中,通过dependencies描述项目依赖,devDependencies描述开发依赖。
只要这个项目是前端项目,即使后台不是Node.js也会有package.json,因为它的所有的开发工具,都依赖NodeJS。前端项目依赖Node.js的所有工程化工具的。
面对一个项目,最开始的工作就是
1 | npm init |
生成一个package.json,这个是工程的身份证。
然后安装webpack
1 | npm install webpack --save-dev |
加上--save-dev
,此时webpack就是我们的开发依赖了。
此时package.json文件:
1 | { |
安装babel的相关loader:
1 | cnpm install babel-core --save-dev |
前端依赖
1 | cnpm install jquery --save |
二、webpack和React
webpack使用的CMD规范进行开发,此时我们的React就作为了依赖项。
1 | cnpm install react --save-dev |
然后创建一个.babelrc
文件,告诉babel如何工作,很关键。
1 | { |
改变webpack.config.js
里面的设置,明确设置loader:
记住cnpm install --save-dev webpack
1 | var path = require("path"); |
然后就能webpack --watch
了。