一句话概括：webpack是一个模块打包工具（module bundler）。重点在于两个关键词“模块”和“打包”。什么是模块呢？我们回顾一下曾经的前端开发方式，js文件通过script标签静态引入，js文件之间由于没有强依赖关系，如果文件1要用到文件2的某些方法或变量，则必须将文件1放到文件2后面加载。随着项目的增大，js文件之间的依赖关系越发错综复杂，维护难度也越来越高。这样的困境驱使着前端工程师们不断探索新的开发模式，从后端、app的开发模式中我们获得灵感，为什么不能引入“模块”的概念让js文件之间可以相互引用呢？模块1要使用模块2的功能，只需要在该模块1中明确引用模块2就行了，而不用担心它们的排列顺序。基于这种理念，CommonJS和 AMD规范被创造了出来，然后有了require.js、system.js这样的前端模块加载工具和node的模块系统，直到现在流行的es6 module。
模块的引入解决了文件之间依赖引用的问题，而打包则解决了文件过多的问题。当项目规模增大，模块的数量数以千计，浏览器如果要加载如此多的文件，页面加载的速度势必会受影响，而bundler可以把多个关联的文件打包到一起从而大量减少文件的数量提高网页加载性能。提供模块化的开发方式和编译打包功能就是webpack的核心，其他很多功能都围绕它们展开。
核心概念 Module（模块）对于webpack，模块不仅仅是JavaScript模块，它包括了任何类型的源文件，不管是图片、字体、json文件都是一个个模块。Webpack支持以下的方式引用模块：
ES2015 import 方法
CommonJs require() 方法
AMD define 和 require 语法
css/sass/less文件中的 @import 语法
url(...) 和 <img src=http://www.likecs.com/...> 中的图片路径
Dependency Graph（依赖关系图）所谓的依赖关系图是webpack根据每个模块之间的依赖关系递归生成的一张内部逻辑图，有了这张依赖关系图，webpack就能按图索骥把所有需要模块打包成一个bundle文件了。
Entry（入口）绘制依赖关系图的起始文件被称为entry。默认的entry为 ./src/index.js，或者我们可以在配置文件中配置。entry可以为一个也可以为多个。
单个entry： module.exports = { entry: \'./src/index.js\' }或者
module.exports = { entry: { main: \'./src/index.js\' } }; 多个entry，一个chunk我们也可以指定多个独立的文件为entry，但将它们打包到一个chunk中，此种方法被称为 multi-main entry，我们需要传入文件路径的数组：
module.exports = { entry: [\'./src/index.js\', \'./src/index2.js\', \'./src/index3.js\'] }但是改种方法的灵活性和扩展性有限，因此并不推荐使用。
多个entry，多个chunk如果有多个entry，并且每个entry生成对应的chunk，我们需要传入object：
module.exports = { entry: { app: \'./src/app.js\', admin: \'./src/admin.js\' } };这种写法有最好的灵活性和扩展性，支持和其他的局部配置（partial configuration）进行合并。比如将开发环境和生产的配置分离，并抽离出公共的配置，在不同的环境下运行时再将环境配置和公共配置进行合并。
Output（出口）有了入口，对应的就有出口。顾名思义，出口就是webpack打包完成的输出，output定义了输出的路径和文件名称。Webpack的默认的输出路径为 ./dist/main.js。同样，我们可以在配置文件中配置output：
module.exports = { entry: \'./src/index.js\', output: { path: __dirname + \'/dist\', filename: \'bundle.js\' } }; 多个entry的情况当有多个entry的时候，一个entry应该对应一个output，此时输出的文件名需要使用替换符（substitutions）声明以确保文件名的唯一性，例如使用入口模块的名称：
module.exports = { entry: { app: \'./src/app.js\', search: \'./src/search.js\' }, output: { filename: \'[name].js\', path: __dirname + \'/dist\' } }最终在 ./dist 路径下面会生成 app.js和search.js两个bundle文件。
Loader（加载器）Webpack自身只支持加载js和json模块，而webpack的理念是让所有的文件都能被引用和加载并生成依赖关系图，所以loader出场了。Loader能让webpack能够去处理其他类型的文件（比如图片、字体文件、xml）。我们可以在配置文件中这样定义一个loader：