1、modules: 告诉 webpack 解析模块时应该搜索的目录，即 require 或 import 模块的时候，只写模块名的时候，到哪里去找，其属性值为数组，因为可配置多个模块搜索路径，其搜索路径必须为绝对路径，比如，src 目录下面有一个 foo.js 文件和 index.js 文件:
// index.js const foo = require("./foo"); // 必须写全foo.js模块的路径 // const foo = require("foo"); // resolve.modules中配置了模块解析路径为.src目录，则可用只写foo即可搜索到foo.js模块 console.log(foo); module.exports = { resolve: { modules: [path.resolve(__dirname, "./src/"), "node_modules"] }, }
由于 resolve.modules 中配置了 ./src 目录作为模块的搜索目录，所以 index.js 中可以只写模块名即可搜索到 foo.js 模块
2、alias: 用于给路径或者文件取别名，当 import 或者 require 的模块的路径非常长时，我们可以给该模块的路径或者整个路径名+文件名都设置成一个别名，然后直接引入别名即可找到该模块，比如，有一个模块位置非常深
// const foo = require("./a/b/c/foo"); // foo.js在./src/a/b/c/foo.js // const foo = require("foo"); // foo被映射成了./src/a/b/c/foo.js文件 const foo = require("bar/foo.js"); // bar被映射成了./src/a/b/c/路径 console.log(foo); module.exports = { resolve: { alias: { "foo": path.resolve(__dirname, "./src/a/b/c/foo.js"), "bar": path.resolve(__dirname, "./src/a/b/c/") } }, }
需要注意的就是，alias 可以映射文件也可以映射路径
3、mainFields: 我们的 package.json 中可以有多个字段，用于决定优先使用哪个字段来导入模块，比如 bootstrap 模块中含有 js 也含有 css，其 package.json 文件中 main 字段对应的是"dist/js/bootstrap"，style 字段中对应的是"dist/css/bootstrap.css",我们可以通过设置 mainFields 字段来改变默认引入，如:
module.exports = { resolve: { mainFields: ["style", "main"] }, }
4、extensions: 用于设置引入模块的时候，如果没有写模块后缀名，webpack 会自动添加后缀去查找，extensions 就是用于设置自动添加后缀的顺序，如:
module.exports = { resolve: { extensions: ["js", "vue"] }, }
如果项目中引入了 foo 模块，require("./foo"),其会优先找 ./foo.js,如果没有找到 ./foo.js 则会去找 ./foo.vue 文件
七、设置环境变量
设置环境变量需要用到 webpack 提供的一个内置插件 DefinePlugin 插件，其作用是将一个字符串值设置为全局变量，如:
module.exports = { plugins: [ new webpack.DefinePlugin({ DEV_MODE: JSON.stringify('development') // 将'development'设置为全局变量DEV_MODE }), ] }
这样配置之后任何一个模块中都可以直接使用 DEV_MODE 变量了，并且其值为'development',与 ProvidePlugin 有点相似，ProvidePlugin 是将一个模块注入到所有模块中，实现模块不需要引入即可直接使用。
八、webpack 优化
1、noParse: 该配置是作为 module 的一个属性值，即不解析某些模块，所谓不解析，就是不去分析某个模块中的依赖关系，即不去管某个文件是否 import(依赖)了某个文件，对于一些独立的库，比如 jquery，其根本不存在依赖关系，jquery 不会去引入其他的库(要根据自己对某个模块的了解去判断是否要解析该模块)，所以我们可以让 webpack 不去解析 jquery 的依赖关系，提高打包速度，如:
module.exports = { module: { noParse:/jquery/,//不去解析jquery中的依赖库 } }
noParse 是 module 配置中的一个属性，其属性值为一个正则表达式，填入不被解析的模块名称。
为了更清楚的展示 noParse 的作用，假设我们在入口文件 index.js 中引入 bar.js 模块，同时这个 bar.js 模块中也引入了 foo.js 模块，foo.js 不再依赖其他模块了，那么在不使用 noParse 的情况下，webpack 打包的时候，会先去分析 index.js 模块，发现其引入了 bar.js 模块，然后接着分析 bar.js 模块，发现其引入了 foo.js 模块，接着分析 foo.js 模块。
Entrypoint index = index.js [./src/bar.js] 55 bytes {index} [built] [./src/foo.js] 21 bytes {index} [built] [./src/index.js] 81 bytes {index} [built]
而此时如果使用了 noParse: /bar/，那么 webpack 打包的时候，会先去分析 index.js 模块，发现其引入了 bar.js 模块，但是由于 noParse 的作用，将不再继续解析 bar.js 模块了，即不会去分析 bar.js 中引入的 foo.js 模块了。
Entrypoint index = index.js [./src/bar.js] 55 bytes {index} [built] [./src/index.js] 81 bytes {index} [built]
2、exclude: 在 loader 中使用 exclude 排除对某些目录中的文件处理，即引入指定目录下的文件时候，不使用对应的 loader 进行处理，exclude 是 loader 配置中的一个属性，属性值为正则表达式，如: