学习 webpack 前，你须要了解的那些概念

wepback做为前端最热门的打包管理工具之一，学习一下是颇有必要的，关于webpack的学习教程不少，而且官方也有对应的中文文档，因此本篇文章再也不讲解如何使用webpack，而是重点讲解学习webpack前须要了解的一些概念。

什么是webpack

关于什么是webpack，通常的教程里面都会提到webpack是一个模块化打包工做，可是不少初学者没有模块化这个概念，因此每每在第一步就被拦住了。因此在讲什么是webpack以前，我想先讲一下和模块化相关的概念。

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语法：

//定义模块

etdog="我爱哈士奇"

exportdefaultdog

//引用模块

importdogfrom'animal'复制代码

webpack干了什么

上面已经提到这些模块化的语法是不能在浏览器环境中运行的，因此咱们须要这些将这些互相依赖的文件进行编译（打包），编译成浏览器可以运行的代码。而webpack作的就是这个打包操做，好比咱们在main.js里面依赖了add.js文件，而add.js文件使用import $ form 'jquery',那么webpack会发现main.js须要add.js，而后将add.js导入，导入add.js的时候发现add.js须要jquery，而后又将jquery给导入，最后生成了一个总的js文件，这样咱们的代码就能够到浏览器环境上运行了。

webpack与es6

es6提供了不少激动人心的新特性，可是这些新特性并不被全部的浏览器支持，为了使用这些新特性，咱们可使用babel插件，将咱们的代码es6代码转换成es5代码。可是对于一些es6新的api，好比promise等，须要使用babel-polyfill，而如何使用babel-polyfill呢？只要在须要对es6转换成es5的文件头部加上import 'babel-polyfill';很明显，这是es6的模块语法，表示这个文件依赖babel-profill这个文件，因此咱们须要使用打包工具来进行打包，这样才能运行这段代码。因此，想要学习es6，webpack是必需要迈过去的一道坎。

如何学习webpack

谈了这么多，总算要到如何学习了。学习资料的话，能够去看一些已经整理好的资料或者官网的文档，了解config的基本语法就能够开始撸了。这里推荐一个练手的项目：多动症简历。这是一个颇有意思的项目，里面用到了es6+promise+webpack,若是你能将这段代码进行打包，并实现如下几个要求，那么你webpack能够说是入门了。若是你对这个多动症简历项目感兴趣，能够去看一下项目做者的这篇文章：用原生js写一个"多动症"的简历,推荐直接阅读项目的源代码，从中能够学到不少知识。

• 使用babel-loader将es6转换成es5
• 将css单独的打包成一个文件
• 压缩js代码
• 压缩css代码
• 使用html模板生成index.html
  至于上面这些功能如何实现，须要用到哪些插件，但愿你能本身去百度，去google，去stackoverflow。只有本身练过，才算完全掌握，若是只是简单的跟着官网项目作几个简单的demo,其实没什么意义。

踩坑记录

这是我在使用webpack时遇到的一些坑，webpack的版本号是3.0，若是你也遇到了，能够参考一下下面的解决方案。
使用extract-text-webpack-plugin生成单独的css时，可能会报错chunk.sortModules is not a function ，解决方案是回退extract-text-webpack-plugin版本号到2.1.2，npm i extract-text-webpack-plugin@2.1.2。
通常的压缩js插件没法压缩es6，若是想对es6代码进行压缩，可使用UglifyjsWebpackPlugin。可是若是教程一步一步来仍是会报错Unexpected token: name (doc)。解决方案是将babel配置拿出来，不要放在webpack.config中，单独的放到.babelrc中。
使用了extract-text-webpack-plugin后没法进行css压缩？
可使用optimize-css-assets-webpack-plugin这一插件来解决。

webpack和gulp有什么区别

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