携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天，点击查看活动详情

构建工具

为什么需要构建工具

构建工具是非常重要的，由于我们JavaScript基本每年都会有一个新的版本出现，浏览器也会跟随ES版本不断支持新的功能，但实际的用户可能并不一定会使用最新的浏览器版本，就会导致新的语法在浏览器中无法执行，这时候就需要对新的语法进行降级来让比较旧的浏览器版本可以正常编译，就需要构建工具来实现。

不仅是对语言新功能的编译，我们在写React的时候，默认的模板格式就是JSX，这个格式同样浏览器也是兼容的，无法直接解析；

还有像CSS前缀补全/预处理器、压缩混淆、图片压缩和路径依赖等等，都需要构建工具的参与。

演变历程

从最开始的ant、YUI Tool，到grunt和gulp，这两者主要特点都是通过一个个任务来完成一个具体的工作项，都是Nodejs编写，不同的是gulp新增了文件流的概念，每一个任务完成后都以流的方式存放于内存中，性能较高；还有fis3，是由百度团队开发，使用者相对较少，现已不再维护。

然后就是rollup、parcel和我们的主角webpack。parcel在设计之初，它的设计者就标榜它的零配置特性，因为webpack的配置细究起来的确很复杂，一度有被传我们需要一个webpack配置工程师。

webpack之所以长盛不衰，主要有几个特点：

• 社区生态活跃
• 配置灵活和插件化扩展
• 官方版本更新迭代快

基本用法

webpack的默认配置文件是webpack.config.js，当然也可以自定义：

webpack --config 指定配置文件

在webpack配置文件中，主要有五大属性可供配置：入口文件、打包后的输出位置和文件、打包环境，是开发环境还是生产环境；需要的loader和一些必备的插件。

entry: './src/index.js' // 入口
output: './dist/index.js' // 输出
mode: 'production' // 环境
modules: {
  rules: [
    {test: '\.txt$', use: 'raw-loader'} // loader
  ]
}
plugins: [
  new HtmlWebpcakPlugin({
    template: './src/index.html' // plugins
  })
]