webpack.dev.config.js
devServer:是启动http服务器到指定的端口，这时不会在./dist下面生成静态文件，原因是devServer会把构建的文件保存在内存中，需要通过http访问。
它不会理会配置中的output.path属性，所以要获取bundle.js正确的url是http://localhost:port/bundle.js；
build.js
require('./check-versions')() //检查node和npm的版本
ora=require('ora') //在启动项目时使用的一个loading插件;
const spinner = ora('building for production...')
spinner.start() //开始loading画面
webpack.prod.config.js
const merge = require('webpack-merge') //一个可以合并数组和对象的插件
const HtmlWebpackPlugin = require('html-webpack-plugin') //一个用于生成HTML文件并自动注入依赖文件(link/script)的webpack插件
const ExtractTextPlugin = require('extract-text-webpack-plugin') //用于从webpack生成的bundle中提取文本到特定文件中的插件,可以抽取出css，js文件将其与webpack输出的
//bundle分离;如果我们想把webapck打包成一个文件，css js分离开，需要这个插件
webpack.base.config.js
context:
webpack在寻找相对路径的文件时会以context为根目录，context默认执行启动webpack时所在的当前工作目录。若想改变context的默认配置，可以这样设置：
context: path.resolve(__dirname, 'app')
注意：context必须是一个绝对路径的字符串。
除此之外还可通过在启动webpack时带上参数webpack --context 来设置context。
loader让webpack能够去处理那些非JavaScript文件（webpack自身只能理解JavaScript）；loader可以将所有类型的文件转换为webpack能够处理的有效模块，
然后就可以利用webpack的打包能力，对他们进行处理；本质上，webpack loader将所有类型的文件，转换为应用程序的依赖图可以直接引用的模块。
注意:loader能够import导入任何类型的模块(例如.css文件)，这是webpack特有的功能，其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是有很必要的，因为这可以使开发人员创建出更准确的依赖关系图。
entry入口起点
单个入口(简写)语法
用法：entry：string |Array<string>
entry属性大单个入口语法，是下面的简写：
entry:{
main:'./src/main.js'
}
当向entry传入一个数组时会发生什么？向entry属性传入[文件路径（file path）数组]将创建“多个主入口”。在你想要索格依赖文件一起注入，并且将它们的依赖导向到一个chunk“时，传入数组的方式就很有用”。
对象语法
用法
entry:{[entryChunkName]:string|Array<string>}
const config={
entry：{
app:'./src/app.js',
vendors:'./src/vendors.js'
}
}
常用场景：多页面应用程序 分离用用程序和第三方库[vendor]入口
output
配置output选项可以控制webpack如何向硬盘写入编译文件。即使可以存在多个入口起点，但只指定一个输出配置。
如果配置创建了多个单独的 "chunk"（例如，使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。
loader
loader用于对模块的源代码进行转换。loader可以使你在import或‘加载’模块时预处理文件。因此，loader类似其他构建工具中的“任务(task)”,并提供了处理前端构建步骤的强大方法。loader可以将文件从不同的语言(TypeAcript)转换为JavaScript，或将内联图像转换为data URL.loader甚至允许你直接在javaScript模块中import css文件。
使用loader
配置(推荐):在webpack.config.js 文件中指定loader。
内联： 在每个import语句中显式指定loader
cli:在shell命令中指定它们
loader特性
loader支持链式传递。能够对资源使用流水线。一组链式的loader将按照相反的顺序执行。loader链中的第一个loader返回值给下一个loader。在最后一个loader，返回webpack所预期的JavaScript。
loader可以是同步的，也可以是异步的。
loader运行在Node.js中，并且能够执行任何可能的操作。
loader接收查询参数，用于对loader传递配置。
loader也能够使用options对象进行配置
除了使用package.json常见的main属性，也可以将偏头痛的npm模块导出为loader，做法是在package.json里定义一个loader字段。
插件（plugin）可以为loader带来更多特性。
loader能够产生额外的任意文件
loader通过预处理函数，为JavaScript生态系统提供了更多能力。用户现在可以更加灵活地引入细粒度逻辑，例如压缩 打包 语言翻译；
插件[plugins]
插件目的在于解决loader无法实现的其他事。
配置【configuration】
webpack配置是标准的Node.js CommonJS模块，你可以做到以下事情：
通过require()导入其他文件
通过require() 使用npm的工具函数
使用JavaScript控制流表达式，例如?：操作符
对常用值使用常量或变量
编写并执行函数来生成部分配置
webpack模块
对比Node.js模块，webpack模块能够以各种方式表达它们的依赖关系：
ES2015 import语句
CommonJs require()语句
AMD define和require语句
css/sass/less文件中的@import语句
样式(url(...))或HTML文件(<img src=.../>)中的图片链接(image url)
webpack 1 需要特定的loader来转换ES 2015 import,然而通过 webpack2 可以开箱即用。
模块解析【module resolution】
resolver是一个库，用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖模块，然后被后者引用：
所依赖的模块可以是来自应用程序代码或第三方的库。resolver帮助webpack找到bundle中需要引入的模块代码，这些代码在包含在每个require/import语句中。
到打包模块时，webpack使用enhanced-resolve来解析文件路径
webpack中的解析规则
使用enhanced-resolve，webpack能够解析三种文件路径：
绝对路径
由于我们已经取得文件的绝对路径，因此不需要进一步再做解析。
相对路径
在这种情况下，使用import或require的资源文件所在的目录被认为时上下文目录(context-directory)。在import/require中给定的相对路径，会添加此上下文路径，以产生
模块的绝对路径
模块路径
模块将在resolve.modules中指定的所在目录内搜索。你可以替换初始模块路径，此替换路径通过使用resolve.alias配置选项来创建一个别名。
一旦根据上述规则解析路径后，解析器将检查路径是否指向文件或目录如果路径指向一个文件：
如果文件具有文件扩展名，则被直接将文件打包。
否则，将使用resolve.extensions选项作为文件扩展名来解析，此选项告诉解析器在解析中能够接收哪些扩展名。
如果路径指向一个文件夹，则采取一下步骤找到具有正确扩展名的正确文件：
缓存
每个文件系统访问都被缓存，以便更快触发对同一文件的多个并行或串行请求。在观察模式下，只有修改过的文件会从缓存中摘出。如果关闭观察模式，在每次编译前清理缓存。
依赖图
webpack从命令行或配置文件中定义的一个模块列表开始，处理你的应用程序。从这些入口起点开始，webpack递归地构建一个依赖图，这个依赖图
包含着应用程序所需的每个模块，然后将所有这些模块打包为少量的bundle-通常只有一个-可由浏览器加载。
Runtime
runtime，以及伴随的manifest数据，主要是指：在浏览器运行时，webpack用来连接模块化的应用程序的所有代码。runtime包含：
在模块交互时，连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。
Manifest
当编译器开始执行 解析 和映射应用程序时，它会保留所有模块的详细要点。这个数据集合成为Manifest，当完成打包并发送到浏览器时，会在运行时通过
Manifest来解析和加载模块。无论你选择哪种模块语法，那些import或require语句现在都已经转换为_webapack_require_方法，此方法指向模块标识符，通过使用manifest
中的数据，runtime将能够查询模块标识符，检索出背后对应的模块。
模块热更新
模块热替换功能会在应用程序运行过程中替换 添加 或删除模块，而无需重新加载整个页面。主要时通过一下几种方式，来显著加快开发速度：
1 保留在完全重新加载页面时丢失的应用程序状态
2 只更新变更内容，以节省宝贵的时间
3 调整样式更加快速