标签：

为什么需要构建工具？

通过我们了解到 现代浏览器对es6特性的撑持水平：

由于现代浏览器对es6特性的撑持度并不能说太高，为了兼容所以需要进行 es6语法的转换，除了此，三大框架的语法特征，例如转换JSX，双括号等， 还有其他如CSS前缀补全/预措置惩罚惩罚器，JS压缩混淆，图片压缩等。

前端构建演变

构建工具说明

YUI Compressor:https://github.com/yui/yuicompressor, YUI压缩器是一种JavaScript和CSS压缩器，除了删除注释和空非分格外，还使用尽可能小的变量名来混淆局部变量。

Grunt：https://github.com/gruntjs/grunt, Grunt是一个JavaScript任务运行器，自己就使用JavaScript开发，灵活的打点任务间的依赖和 执行界说的任务。

Gulp：https://github.com/gulpjs/gulp, gulp是基于流的自动化构建工具，除了打点和执行任务，还撑持监听读写文件。

fis3：https://github.com/fex-team/fis3， 集成了web开发中常用的构建成果，如资源定位，文件编译，压缩，雪碧图等。

rollup:https://github.com/rollup/rollup, 专注于ES6模块化，可将一小段代码编译成更大或更庞大的内容，例如库或应用措施。

webpack：https://github.com/webpack/webpack， 一切皆模块，撑持模块打包及丰富的插件扩展成果。

parcel：https://github.com/parcel-bundler/parcel， 极速零配置Web应用打包工具,新兴地打包工具。

初识webpack

webpack打包理念：一切皆模块。

由于丰富的社区插件和扩展，及官网的版本迭代速度及性能优化等优势，我们来切入对webpack的了解。

环境搭建：安置webpack和webpack-cli

1、创建webpack-beginner文件夹，并初始化依赖包环境

mkdir webpack-beginner cd webpack-beginner npm init -y

2、安置webpack和webpack-cli,此中--save-dev参数默认打包时不会打包进入 出产环境的依赖包上。

npm install webpack webpack-cli --save-dev

配置文件名称

webpack默认配置文件为webpack.config.js。

可以通过package.json配置启动项，通过webpack --config 指定配置文件， 实现对应配置文件的设置。

webpack配置构成

module.exports = { mode:‘production‘, // -- 模式 entry:‘./src/index.js‘, // -- 打包入口文件 output:‘./dist/main.js‘, // -- 打包输出 module: { rules: [] // --loader配置 }, plugins: [] // -- 插件配置 }

此中：

entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始， 每个依赖项随即被措置惩罚惩罚，最后输出到称之为 bundles 的文件中。默认指定的entry为： ./src/index.js。

output： webpack 在哪里输出它所创建的 bundles，以及如何定名这些文件。默认指定的 outpu为：./dist/main.js。

loader：loader 让 webpack 能够去措置惩罚惩罚那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。 loader 可以将所有类型的文件转换为 webpack 能够措置惩罚惩罚的有效模块。
在webpack配置中loader有两个方针：
1、test属性，用于标识出应该被对应的loader进行转换的某个或某些文件。
2、use属性，暗示进行转换时，应该使用哪些loader。

plugins：插件的范畴包孕，从打包优化和压缩，一直到从头界说环境中的变量。 可通过require引入并添加到plugins数组的方法使用。也可以在一个配置文件中因为差别目的而多次使用同一个插件， 这时需要通过使用 new 操纵符来创建它的一个实例。

mode：通过设置development或production参数来设置对应的差别环境。

webpack初体验

demo对应的代码地点：https://github.com/PCAaron/blogCode/tree/master/webpack/webpack-beginner

1、由于package.json默承认读取.bin下目录的命令，我们可通过package.json中scripts 中设置启动项，通过npm run 启动配置，方法运行构建。

2、创建webpack.config.js设置简单的打包构建，实现js的打包并 输出到bundle.js中。

const path = require(‘path‘) module.exports = { entry:‘./src/index.js‘, output:{ path: path.resolve(__dirname,‘dist‘), filename: ‘bundle.js‘ }, mode:‘production‘ }

3、然后新增src目录，index.js为入口文件。

4、目前没有html页面检察打包后的代码，通过dist目录手动 创建index.html并引入/dist/bundle.js检察打包功效。

输出功效：

保举阅读

grunt官网

gulp官网

rollup中文网

webpack官网

parcel中文网

后续文章优先更新于GitHub和公家号上，欢迎大家star和存眷提前获取最新文章，感谢感动~

GitHub：https://github.com/PCAaron/PCAaron.github.io

公家号：前端美食汇，，亦可直接扫文末二维码直接存眷