webpack自动化打包构建工具

1、是什么

webpack是一个前端项目自动化构建的工具，基于node.js的开发的，可以完美的实现前端资源的合并，打包，压缩，混淆等诸多功能。

2、主要的功能

• 通常一个页面中有许许多多的资源需要被加载，包括js, css，img, 字体等等文件，，每链接一个外部资源，意味着浏览器就不得不在页面渲染的同时向服务器发送大量的二次请求取获取这些资源，这样浏览器会多次访问服务器，如果有一种方式将这些需要二次请求的文件都打包为一个文件，访问页面时一次性获取所有需要的资源，问题将会简单许多。webpack 正是基于这样的需求实现的。使用webapack，我们可以将这些需要二次请求的 js,css 等文件打包到一个 bundle.js（通常这样命名）的文件中。前端页面只需要发送一次请求，获取这个bundle.js即可获得所有的文件的内容，浏览器可以正常的解析执行相同的功能。

• webpack 使用了插件的方式来扩展功能，我们可以添加对应的插件和loader实现css文件的解析，添加css预处理器使用less和scss，开发时的自动热更新，添加babel 以至于我们可以使用最新的ES6语法便捷开发等等功能。而大部分的插件和loader 包 webpack官方已经提供，通过简单的安装模块和配置即可使用。

• 同时webpack还考虑到了浏览器的兼容性，这也是前端比较麻烦的问题，我们完成代码的书写后，经过webpack对项目进行打包编译，会生成新的 js 文件，这个文件可以被大部分的流行的浏览器识别执行，如果我们编码的 JS 文件没有经过 webpack 编译打包&#x