前端工程化

0、webpack 与 grunt、gulp 的不同？

Grunt、Gulp 是基于任务运⾏的⼯具： 它们会⾃动执⾏指定的任务，就像流⽔线，把资源放上去，然后通过不同插件进⾏加⼯，各种插件自由组装，⽅便打造各种⼯作流。

Webpack 是基于模块化打包的⼯具: ⾃动化处理模块，webpack 把⼀切当成模块，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

因此这是完全不同的两类⼯具,⽽现在主流的⽅式是⽤npm script 代替 Grunt、Gulp，npm script 同样可以打造任务流。

注释：npm script 即package.json中的script对象中所包含的node命令集合的方式（即vue 、react 运行项目、打包项目的node命令的方式）

1、webpack和rollup的区别，打包出来的产物有什么区别？

1.1、webpack：

• webpack官方解析：webpack 是一个现代 JavaScript应用程序的静态模块打包器。
  当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
• webpack的功能：代码拆分，按需加载
• webpack2后已支持tree-shaking

1.2、rollup

• Rollup官方解析：Rollup 是一个 JavaScript 模块打包器，聚焦于基础库的打包，例如：vue、d3等
• rollup把所有资源打包到同一个地方，一次性加载
• 支持tree-shaking

1.3、webpack与Rollup的差别

• Rollup偏向应用于js库，webpack偏向应用于前端工程、UI库
• 如果你的应用场景中只是js代码，希望做ES转换，模块解析，可以使用Rollup。
  如果你的场景中涉及到css、html，涉及到复杂的代码拆分合并，建议使用webpack。

1.4、Tree-shaking是什么

Tree-shaking是webpack内置的一个优化，主要功能就是去除没有用到代码。有利于性能优化。

2. webpack、rollup、parcel 优劣？

webpack 适⽤于⼤型的前端网站构建:

• 有强⼤的 loader 和 丰富的插件⽣态

rollup 聚焦于基础库的打包，例如：vue、d3等

• Rollup 就是将各个模块打包进⼀个⽂件中，并且通过 Tree-shaking 来删除⽆⽤的代码, 可以最⼤程度上降低代码体积

parcel 适⽤于简单的实验性项⽬:但是⽣态差、报错信息不够全⾯都是他的硬伤，目前不建议使⽤

推荐：

• 如果你的应用场景中只是js代码，希望做ES转换，模块解析，可以使用Rollup。
• 如果你的场景中涉及到css、html，涉及到复杂的代码拆分合并，建议使用webpack

2、postcss

2.1、是什么

postcss 一种对css编译的工具，类似babel对js的处理，常见的功能如：

• 1 . 使用下一代css语法
• 2 . 自动补全浏览器前缀
• 3 . 自动把px代为转换成rem
• 4 . css 代码压缩等等

2.2、postcss与 less sass 的区别

• less sass 是预处理器，用来支持扩充css语法。
• postcss 既不是 预处理器也不是 后处理器，可以和less/sass结合使用

2.3、postcss的使用

// 1、安装
npm install postcss-loader –save-dev

// 2、配制
rules:[
	{
   
    	test:/\.css$/,
    	exclude:/node_modules/,
    	use:[
	    	{
   
	    	  loader:'syle-loader'