本文共 968 字，大约阅读时间需要 3 分钟。

javascript在浏览器端步入模块化时代以后，产生了下列的问题：

1. 性能和效率的问题。由于模块化的出现，致使需要功能模块被细分，从而导致js文件变多(依赖变多)。进而，当引入一个完整的功能模块的时候，浏览器会加载更多的js文件。浏览器加载js文件是通过网络请求的方式的获取的，如果一个模块的依赖很多的话，就会发生很多的网络请求去获取js文件，导致了多余的网络开销，间接的影响了性能。
2. 兼容性问题。浏览器目前的模块化标准只支持ES6，AMD,CMD，并不支持commonJS的模块化标准，进而导致使用commonJS模块化标准的包，浏览器是不支持的。假如你希望通过npm去安装一个包给浏览器使用，很遗憾的是，浏览器很多时候用不了，因为你安装的那个包很可能就是通过commonJS的模块化标准导出的，浏览器不支持，这就让人很郁闷了。

前端构建工具就是为了解决以上问题而诞生，那么构建工具是如何解决这些问题的呢？

1. 通过打包和压缩的方式，把多个文件，通过内部逻辑分析和算法，合并少量文件，减少了文件的数量，并且把文件内部不必要的空格和符合去掉，把变量的长度用更简短的字母替换，进而减少了文件的体积，还提高了一定的安全性。当浏览器加载的文件数量和体积都变小了，效率和性能自然就提高了。
2. 有了webpack构建工具之后，可以随意使用ES6或者commonJS的方式导入模块，构建工具会自行分析你的导入方式，而给你返回对应的结果，以下是四种情况:

   // 相同的标准1.使用commonJS的标准导入导出2.使用ES6的标准导入导出// 不同的标准1.ES6的标准导出，使用commonJS的方式导入：//a.js：module.exports = {    a:1}//b.js：import all from './a.js'import { a } from './a.js'console.log(all) // { a:1 }console.log(a) // 12.commonJS的方式导出,ES6的方式导入：//a.jsexport const a = 1export default 2//b.jsconst all = require('./a.js')console.log(all) // { a:1, default:2 }