发表于： 2017-07-26 17:22:49

如何使用WEBPACK？

大家好，我是IT修真院武汉分院第五期的学员，一枚正直纯洁善良的web程序员

今天给大家分享一下，修真院官网JS任务11，如何使用WEBPACK？

1.背景介绍

模块化是现在前端比较热门的一个词汇，最新的es2015中也提供了原生的module语法，提供对编程模块化的支持。

而cmd以及es6的module语法都是不被浏览器支持的，需要在node环境下打包以后才可以在浏览器里面运行。

webpack就是现在主流的一个打包工具，使用webpack打包以后，我们的代码就可以在浏览器中运行了

2.知识剖析

JAVASCRIPT的运行环境

因为我们平时写的js代码都在浏览器中运行，所以可能会造成一个错觉，那就是js代码只能在浏览器中运行，其实浏览器只是js的一个运行环境，除了在浏览器，还可以在服务器上运行，也就是node环境，感兴趣的可以自己下载node.js试一下，在node.js里面可以直接运行js代码。所以有些语法在浏览器里面并不支持，比如es6的module，即使在最新的浏览器里面也不行，这些语法只能在node环境中运行，直接在浏览器中使用会报错。

什么是模块化？

在讲模块化之前，我们先复习一下less，我们在a.less文件中定义了一个颜色变量@white:#fff，现在我在b.less中想用到这个@white变量应该怎么办呢？使用@import 'a'就可以了。在上面那段less代码中，其实我们就用到了模块化编程，只不过是基于less的。现在我们再来看一下js如何实现模块化编程。

传统的写法比较简单，就是把自己需要的js文件全部放到index,html中引入，在引入的时候还需要确保引入的顺序是正常的，本质上来说，就是把所有代码全部引入到一个js文件中。而现在我们采用模块化的写法，就会相对来说结构清晰一点，比如在main.js里面需要使用jquery，那么我们可以在main.js里面这么写：import $ from "jquery"，在index.html里面只需要引入main.js即可，采用这种写法可以让文件间的依赖关系更加清楚，实现按需加载，同时结构也会更加合理。

JS的模块规范有哪些

在es6之前，主要采用AMD和CMD这2中规范，AMD规范比较好的一个实现库是require.js，CMD对应的是seajs,还有一点node.js也是符合CMD规范的，所以cmd规范的代码可以直接在node环境下运行。而js的最新版本es6则提供了原生的module语法，以实现对模块化的支持

CMD语法：

// 定义模块

module.exports =function(){

vargreet =document.createElement('div');

greet.textContent ="Hi there and greetings!";returngreet;};

//引用模块

letgreeter =require('./Greeter.js');

ES6语法：

//定义模块l

etdog="我爱哈士奇"

exportdefaultdog

//引用模块

importdogfrom'animal'

WEBPACK核心概念

entry:整个打包文件的入口

loader:解析器，用来打包css或者图片等其他资源

模块：在webpack中，每一个文件都是一个模块，这些模块通过对应的loader都可以按需加载

3.常见问题

webpack和gulp有什么区别？

4,解决方案

两者虽然在某些功能上类似，比如都可以压缩代码，编译less等。但是两者的定位不同，刚才也提到过了，webpack本质上是一个打包工具，支持CMD的语法，将多个互相依赖的js文件打包成一个js文件。而gulp则是一个自动化工具，用来处理less编译，代码压缩这些，gulp的核心概念是管道，所有文件在管道中流通，然后在流的过程中依次进行代码压缩，less编译等操作，最后再将这些文件流输出到指定目录。所以两者在功能以及定位上都有很大的不同。

5.编码实战

多动症简历：这是一个很有意思的项目，里面用到了es6+promise+webpack,如果你能将这段代码进行打包，并实现以下几个要求，那么你webpack可以说是入门了。

使用babel-loader将es6转换成es5

将css单独的打包成一个文件

压缩js代码

压缩css代码

使用html模板生成index.html

6.扩展思考

如何配置webpack.config？

7.参考文献

webpack官网

8.更多讨论