js文件引用 webpack_Webpack上手指北

近几年，打包构建工具层出不穷，前有Grunt、Gulp，后有Webpack、Rollup等，它们各有优势，均受到部分开发者的欢迎，本文聊聊Webpack的使用。

模块化

不论是新工具还是新技术，都是为了解决问题而存在，那么构建工具解决什么问题呢？

众所周知，最初的网页十分简单，没有多少交互，代码量也少，但随着技术的发展，JavaScript已经不仅仅用来实现简单的表单提交等功能，引入多个js文件到页面中成为常态，但这种做法有很多缺点：

1）需要手动维护文件的加载顺序。且多个js之间通常有依赖关系，难以清晰分辨谁依赖了谁。

2）每一个<script>标签都需要向服务器发送请求，过多的请求会严重拖慢渲染速度。

3）每个<script>标签都暴露在全局作用域，如果没有任何处理而直接在代码中进行变量或函数声明，就会造成全局污染。

模块化解决了这些问题：

• 通过分离模块，导入和导出，可以清晰地看到模块间的依赖关系。
• 借助工具进行打包，页面中只需要加载合并后的资源文件，减少了网络开销。
• 模块之间作用域隔离，彼此不会有命名冲突。

使用Webpack的理由

打包工具众多，为什么选择Webpack？Webpack具备以下几点优势。

1）默认支持多种模块标准，包括AMD、CommonJS，以及最新的ES6模块。这对于某些同时使用多种模块标准的工程非常有用，Webpack会帮我们处理好不同类型模块之间的依赖关系。

2）完备的代码分割解决方案。可以分割打包后的资源，首屏只加载必要的部分，不重要的放到后面动态加载。这对于体积较大的应用尤为重要，可有效减小资源体积，提升首页渲染速度。

3）可以处理各种类型的资源。除JavaScript以外，还可以处理样式、模板、图片等，而开发者需要做的仅仅是导入它们。比如你可以从JavaScript文件导入一个CSS或者PNG，而这一切最终都可以由下面讲到的loader来处理。

4）庞大的社区支持。除了Webpack核心库以外，还有无数开发者为它编写周边插件和工具，大多数的需求你都可以找到现有解决方案。

配置与方法

看看怎么使用。