webpack高级配置与优化详解

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 优化

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!