webpack就是一个现代javascript应用程序的模块打包器，为什么称作模块打包器呢，是因为webpack会将css js image等文件当成模块来进行打包

webpack如何工作呢？

当webpack处理应用程序的时候，首先会找到一个入口文件，然后通过入口文件开始递归的生成 一个关系依赖图，即dependency graph，这个关系依赖图中包含了应用程序需要的所有模块，最后将所有模块打包成少量的 bundler，浏览器进行加载

程序中需要做什么呢？

首先我们需要一个webpack.config.js文件，该文件有一个entry属性，webpack就会把该属性的value作为入口文件，然后递归的生成关系依赖图，那么webpack中 这些模块之间是如何体现关系依赖的呢？ 其实有多种方式，例如commonjs的requrie语句，es2015的import语句，甚至 url等，构建完关系依赖图，然后对关系依赖图中模块进行打包，那么打包之后位置以及文件叫什么？这个体现在webpack.config.js 中的output属性，在该属性下可以指定打包位置，以及打包文件名称，这样整体的webpack打包流程就呈现出来了(加粗区域是我们需要做的)

还需要注意的一件事是，webpack只识别js作为模块，其他文件如何转化成模块，这时候就用到了loader，例如css可以用 css-loader,style-loader等，这涉及到了具体的应用细节