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 设置中的一个属性，属性值为正则表达式，如: