什么是webpack以及为什么使用它

什么是webpack以及为什么使用它

新建 模板 小书匠 

在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具。因为开发时用的是高级语法开发，效率非常高，但很可惜的是，浏览器未必会支持或认识这些语法，此时需要使用打包工具进行转化变换，并处理好各模块间的依赖关系，最后将其进行整合打包。

webpack就是其中一个佼佼者，其核心在于让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用（在后续我们会看到），这就是webpack中模块化的概念。

如果不进行资源打包，所以我们就要处理各种js的引用依赖关系，即导入顺序。

打包

就是将webpack中的各种资源模块进行打包合并成一个或多个包（Bundle）。在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作，接着我们只要处理最后那个js文件即可。

口但是打包的操作似乎grunt/gulp也可以帮助我们完成，它们有什么不同呢？

grunt/gulp的核心是Task

口我们可以配置一系列的task，并且定义task要处理的事务（例如ES6、ts转化，图片压缩，scss转成css）

口之后让grunt/gulp来依次执行这些task，而且让整个流程自动化。

口所以grunt/gulp也被称为前端自动化任务管理工具。

一些打包的流程有代码转化，代码合并，代码压缩，它涉及的流程与蛋糕烹饪相似。有些蛋糕原料我们是可以直接食用的，但是有些原料是需要转化【代码转化】，如稻谷变成面粉。面粉要和鸡蛋，奶油还有糖搅拌均匀【代码合并】，然后经过微波炉烘焙【代码压缩简化】才能食用。

当然，虽然烹饪工具的不同，最终都能烹饪出蛋糕。但是不同的工具，其烹饪速度是不同的。有的工具，它只能解决一小半部分流程，而有的工具一键傻瓜式操作。

grunt是单线程处理，一次只能对一个流程进行控制；

gulp是多线程处理，一次能处理多个步骤。

webpack是一键傻瓜式处理。

■下面的task就是将src下面的所有js文件转成ES5的语法,并且最终输出到dist文件夹中。

const gulp=require('gulp');
const babe1=require('gulp-babel');
gulp. task(' js',（）=>
gulp. src(' src/*. js')
     		.pipe(babe1({
            presets:[' es2015']
            }))
            .pipe(gulp. dest(' dist'))
);

什么时候用grunt/gulp呢？

如果你的工程模块依赖非常简单，甚至是没有用到模块化的概念。

只需要进行简单的合并、压缩，就用grunt/gulp即可。

但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的webpack了。