使用webpack合并js文件

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

在代码实践之前，先说一写webpack的基础知识。

1、为什要使用WebPack

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

• 模块化，让我们可以把复杂的程序细化为小的文件;
• 类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
• Scss，less等CSS预处理器
  …

2、什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

3、WebPack和Grunt以及Gulp相比有什么特性

其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。

Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

如果实在要把二者进行比较，Webpack的处理速度更快更直接，能打包更多不同类型的文件。

---

接下来我们简单为大家介绍
Webpack如何将多个js文件合并（注意这里只是文件的合并，即将多个写好的js合成一个js文件，以减少http请求）。

安装webpack

在安装 Webpack 前，你本地环境需要支持 node.js。安装node.js可以参考node官方文档。

使用如下命令在全局安装webpack。

$ npm install webpack -g

webpack已经安装到计算机上，现在可以使用webpack命令了。

在项目中使用webpack

使用以下命令在项目根目录下生成package.json文件。

$ npm init

安装webpack到项目中

将webpack加入到pageage.json配制文件中，使用以下命令：

$ npm install --save-dev webpack

此时再看package.json文件，对比package.json刚刚创建时，新增加了一段代码。

配置webpack.config.js文件

在项目的根目录下新建一个webpack.config.js文件。配置文件如下：

• context

上下文选项用来决定根目录（即绝对路径）的入口文件

• entry

打包文件的入口点。

• output

output选项告诉webpack如何编译文件到硬盘中，值得注意的是，虽然entry中可以使用一个对象传入多个入口点文件，但是只能给ouput设置一个配置项。

最后，我们将上面的js合并成了一个single.js。只要在项目中引入这个js即可。

参考链接：https://segmentfault.com/a/1190000006178770