https://blog.csdn.net/tangxiujiang/article/details/79511827
https://www.webpackjs.com/ 中文网
前端打包工具有webpack、grunt、gulp等，这里主要介绍webpack.
一、webpack的基本能力：处理依赖、模块化、打包
1、依赖管理：方便引用第三方模块，让模块更容易复用、避免全局注入导致的冲突、、避免重复加载或者加载不必要的模块
2、合并代码：把各个分散的模块集中打包成大文件，减少HTTP的链接的请求次数，配合uglify.js可以减少、优化代码的体积
3、各种插件：babel把ES6+转化为ES5-，eslint可以检查编译时的各种错误
二、webpack的工作原理
简单的说就是分析代码，找到“require”、“exports”、“define”等关键词，并替换成对应模块的引用。
在一个配置文件中，指明对某些文件进行编译、压缩、组合等任务。把你的项目当成一个整体，通过一个给定的主文件 （index.js），webpack将从这个文件开始找到你的项目的所有的依赖文件，使用loaders处理他们，最后打包为一个浏览器可
以识别的js文件。
在没有使用webpack之前：
举个例子：index.html里面有一大堆的css和js文件，如a.js b.js c.js等等
（1）a.js要用到b.js里面的饿一个函数，则a.js要放在b.js后面
（2）c.js要用到a.js里面的一个函数，则c.js要放在a.js后面
（3）b.js又要用到某个js文件里面的函数，则b.js就要放在其后面
如果有N多个js文件，需要手动处理他们的关系，即容易出错。
使用webpack：
webpack的理念就是一切皆模块化，把一堆的css文件和js文件放在一个总的入口文件，通过require引入，剩下的事情webpack会处理，包括所有模块的前后依赖关系，打包、压缩、合并成一个js文件，公共代码抽离成一个js文件、某些自己指定的js单独打包，模块可以是css/js/imsge/font等等。
三、使用场景
1、根据模板生成HTML，并自动处理上面的css/js引用路径
2、自动处理<img>里面的图片路径，css里面背景图的路径，字体引用
3、开启本地服务器，一边改写代码，一边自动更新页面内容
4、编译jsx es6 sass less coffescript等，并添加md5、sourcemap等辅助
5、异步加载内容，不需要时不加载到DOM
6、配合vue.js react.js等框架开发
四、使用webpack打包项目的操作流程
准备条件：安装好npm和webpack
---------------------
作者：tangxiujiang
来源：CSDN
原文：https://blog.csdn.net/tangxiujiang/article/details/79511827
版权声明：本文为博主原创文章，转载请附上博文链接！