Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。
五.Loader介绍和使用
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。
loader 有以下这些特点：
1.Loader 可以通过管道方式链式调用，每个 loader 可以把资源转换成任意格式并传递给下一个 loader ，但是最后一个 loader 必须返回 JavaScript。
2.Loader 可以同步或异步执行。
3.Loader 运行在 node.js 环境中，所以可以做任何可能的事情。
4.Loader 可以接受参数，以此来传递配置项给 loader。
5.Loader 可以通过文件扩展名（或正则表达式）绑定给不同类型的文件。
6.除了通过 package.json 的 main 指定，通常的模块也可以导出一个 loader 来使用。
7.Loader 可以访问配置。
8.插件可以让 loader 拥有更多特性。
9.Loader 可以分发出附加的任意文件。
我们想要在应用中添加一个css文件。
WebPACK只能处理JavaScript本身，所以我们需要css-loader去处理 CSS。我们还需要style-loader去应用这个样式在CSS文件。
安装 loader：
npm install css-loader style-loader
注意：安装 loaders（只需要在本地安装，不需 -g）将会创建一个 node_modules 文件夹，在哪里 loaders 将会激活。
我们要在页面中引入一个 CSS 文件 style.css，首页将 style.css 也看成是一个模块，然后用 css-loader 来读取它，再用 style-loader 把它插入到页面中。
添加一个style.css文件
body { background: blue; }
修改 entry.js：
+ require("!style!css!./style.css"); // 载入 style.css document.write(require("./content.js"));
重新编译并更新您的浏览器看到蓝色背景。
扩展名自动绑定loader
如果每次 require CSS 文件的时候都要写 loader 前缀，是一件很繁琐的事情。
我们可以根据模块类型（扩展名）来自动绑定需要的 loader这样写require("./style.css")。
修改entry.js
- require("!style!css!./style.css"); + require("./style.css"); document.write(require("./content.js"));
注意：-表示这行删掉或者注释掉，+表示新增的内容。
编译:
webpack ./entry.js bundle.js --module-bind "css=style!css"
注意：！在shell中有特殊意义，需要转义,这样写才会成功的
webpack ./entry.js bundle.js --module-bind "css=style!css"
六.配置文件
Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config 选项来指定配置文件。
我们想将配置选项移动到配置文件中，创建一个配置文件 webpack.config.js：
module.exports = { entry: "./entry.js", output: { path: __dirname, filename: "https://www.jb51.net/bundle.js" }, module: { loaders: [ { test: /.css$/, loader: "style!css" } ] } };
现在我们仅仅运行:
webpack
如果完成成功，将会返回运行结果，该命令将尝试WebPACK当前目录中加载文件webpack.config.js。
这里对Webpack的打包行为做了配置，主要分为几个部分：
entry：指定打包的入口文件，每有一个键值对，就是一个入口文件
output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称
module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。
漂亮的输出
如果该项目的增长，编译可能需要更长的时间。所以我们要展示一些进度条。我们想要的颜色…
我们可以这样
webpack --progress --colors
七.插件
插件可以完成更多 loader 不能完成的功能。
插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。
接下来，我们利用一个最简单的 BannerPlugin 内置插件来实践插件的配置和运行，这个插件的作用是给输出的文件头部添加注释信息。
修改 webpack.config.js，添加 plugins：