尽情挥洒创意，webpack 5 新配置助你打造复杂项目

大家好！我是萝卜，上篇介绍了与 entry 和 output 相关的配置，这一篇将介绍 Webpack 其他重要配置。

Webpack 进行构建的时候会从入口文件（entry）开始遍历寻找各个模块的依赖，resolve 配置是帮助 Webpack 查找依赖模块的，通过 resolve 可以配置模块查找的目录和扩展名等。

最常用的 resolve 配置有：

• resolve.extensions ：指定模块的后缀名，默认值是 ['.js', '.json']。
• resolve.modules ：指定要搜索模块的目录，默认值是 ['node_modules']。
• resolve.alias ：给模块起别名，方便引用。

loader 是用来处理模块的，比如把 TypeScript 代码转换成 JavaScript 代码，把 Sass 代码转换成 CSS 代码。Webpack 默认只支持 JavaScript 模块，如果要支持其他类型的模块，需要安装相应的 loader。

最常用的 loader 有：

• babel-loader ：将 TypeScript、JSX 等代码转换成 JavaScript 代码。
• sass-loader ：将 Sass 代码转换成 CSS 代码。
• file-loader ：将图片、字体等文件转换成 Data URI。

plugin 是用来扩展 Webpack 功能的，比如添加 banner 到构建的文件中，压缩构建的文件。Webpack 默认内置了一些 plugin，比如 UglifyJsPlugin、HtmlWebpackPlugin。

最常用的 plugin 有：

• UglifyJsPlugin ：压缩 JavaScript 代码。
• HtmlWebpackPlugin ：生成 HTML 文件。
• BannerPlugin ：在构建的文件中添加 banner。

mode 配置是用来指定构建的环境，比如开发环境、生产环境。Webpack 会根据不同的环境自动选择合适的配置。

最常用的 mode 配置有：

• development ：开发环境。
• production ：生产环境。

devtool 配置是用来指定构建时生成 Source Map 的类型。Source Map 可以帮助你调试构建后的代码。

最常用的 devtool 配置有：

• cheap-module-eval-source-map ：只生成模块级别的 Source Map。
• cheap-source-map ：生成完整的 Source Map。
• eval-source-map ：生成内联的 Source Map。

externals 配置是用来指定不打包到 bundle 中的模块，比如 jQuery。

devServer 配置是用来启动一个开发服务器，方便调试代码。

optimization 配置是用来优化构建后的代码，比如压缩代码、去除无用代码等。

以上是 Webpack 的一些重要配置，希望能对大家有所帮助。