1）context：
context: path.resolve(__dirname, 'js'),//配合entry，含义是从当前项目目录下的js文件下查找入口文件
基本目录，绝对路径，用于从配置中解析入口起点和加载器。
2）entry：
entry: './js/main.js',
应用程序的起点入口，从这个起点开始，应用程序启动执行，如果传递一个数组的话，那么数组的每一项都会执行。它的类型可以是string，array，object；
3）output：
output配置是输出最终想要的代码，它是一个object，里面包含很多配置项
* 1 filename：输出文件的名称
* 2 path：文件被写入硬盘的位置，一般通过nodejs的path模块获取绝对路径
path: path.resolve(_dirname,'./dist') //将输出的文件都放在dist目录下
如果有多个chunk要输出时，就需要借助[name]变量，webpack会为每个chunk取一个名称，因此我们根据chunk的名称来区分输出的文件名。
filename: '[name].js' //[name]的值是entry的键值，会输出多个入口文件
chunkFilename是未被列在entry中的，但是有需要被打包出来的文件命名配置。在异步按需加载模块的时候，一般这样的文件没有被列在entry中，【如在项目在js文件内再新建plugins文件夹，再创建a.js文件】在入口文件中使用异步方式（require.ensure）引入a.js，然后在webpack的output配置添加chunkFilename配置
require.ensure（ dependencies：String[]， callback：function（require）， errorCallback：function（error）， chunkName：String ）
【webpack中的require.ensure()可以实现按需加载资源包括js,css等，它会给里面require的文件单独打包，不和主文件打包在一起，webpack会自动配置名字。这里有三个参数，第一个参数是个数组，标明依赖的模块，这些会提前加载，第二个是回调函数，在这个回调函数里面的require的文件会被单独打包成一个chunk,不会和主文件打包在一起，这样就生成了两个chunk,第一次加载时只加载主文件，当点击时就会加载单独打包的chunk。
还要配置chunkFilename:[name].js这样才会最终生成正确的路径和名字。】
* 3 publicPath
output.path是指所有输出文件的本地文件目录（绝对路径），也即path是存放打包后的文件的输出目录。
publicPath正式环境可以理解为改变相对目录下的静态资源文件的路径为正确的路径，它是指定资源文件引用的目录（相对于服务器的根目录来讲）
开发环境下的publicPath的理解：将输出的文件都放在dist目录下，然后把dist目录删除掉，使用publicPath可以保留dist目录
* 4 crossOriginLoading
webpack输出的部分代码有可能需要异步加载，而异步加载是通过json方式实现的。jsonp的原理是动态的向html中插入一个<script>,crossOriginLoading则是用于配置这个一部插入的标签的crossorigin的值。【anonymous-启用跨域加载，在加载此脚本资源时不会带上用户的cookies，即发送不带凭据的请求；use-credentials-启用跨域加载，在加载此脚本资源时会带上用户的cookies，发送带凭据的请求；false-禁用跨域加载】
4）模式（mode）
提供mode配置项，告诉webpack使用对应的模式【使用development模式代码不会被压缩，使用production代码会被压缩】
我们都知道webpack是适用于资源进行打包的，里面的所有资源都是模块，内部实现了对模块资源进行加载机制，但是webpack只能处理js模块，如果要处理其他类型的文件，就要使用loader进行转换。Loader可以理解为是模块和资源的转换器，它本身也是一个函数，接收源文件作为参数，返回转换的结果。
配置loader，需要使用rules模块来读取和解析规则，它是一个数组，数组里面的每一项描述了如何处理部分文件
* 1 条件匹配：
test：/.js$/ , //正则匹配以js结尾的 include：path.resolve(__dirname,'src') //只包含目录下的js文件，加快查找速度 exclude：path.resolve(__dirname,'node_modules') //排除node_modules目录下的文件
通过配置test，include，exclude三个配置项来选中loader需要应用规则的文件；
* 2 应用规则：
对选中的文件通过use配置项来应用loader，可以只应用一个loader或者按照从右往左的顺序应用一组loader，也可以向loader传入参数；
* 3 重置顺序：
Loader执行顺序默认是从右往左执行的，但是我们可以通过enforce选项将其中一个Loader的执行顺序放到最前或最后
在loader需要传入多个参数时，可以通过一个object来描述
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
},
/*
enforce: 'post' 的含义是将Loader执行的顺序放到最后
enforce: 'pre' 的含义是将Loader执行顺序放到最前面
*/
enforce: 'post'
}
]
5）noParse
该配置项可以让webpack忽略对部分未采用模块化文件的递归解析和处理，该忽略的文件不能包含import，require，define等模块化语句。这样可以提高构建性能，比如像一些库jquery等就没必要使用webpack去递归解析和处理。
6）alias
resolve.alias是通过别名来将原导入路径映射成一个新的导入路径。
resolve: {
alias: {
components: './src/components'
}
}
7）extensions
在使用import导入文件时，有时候没有带入文件的后缀名，webpack会自动带上后缀去访问文件是否存在，默认的后缀名为[.js .json]
8）externals
externals用来告诉webpack在构建代码时使用了不处理应用的某些依赖库，即告诉webpack在js运行环境中已经内置了哪些全局变量，不用将这些代码打包到代码里面去。依然可以在代码中通过AMD，CMD或window全局方式访问。