细说webpack基础配置

webpack 是一个非常流行的构建工具，它可以将不同的模块组合成一个 bundle 文件，从而方便在浏览器中运行。webpack 的配置文件非常复杂，有许多不同的选项可以配置。本文将对 webpack 的基础配置进行详细的讲解，以便读者能够快速入门 webpack，并将其应用于自己的项目中。

1. entry

entry 配置项用于指定要打包的入口文件。它可以是一个字符串、一个数组或一个对象。如果指定了一个字符串，则 webpack 会将该文件作为入口文件进行打包。如果指定了一个数组，则 webpack 会将数组中的所有文件作为入口文件进行打包。如果指定了一个对象，则 webpack 会将对象的 key 作为入口文件的名称，将对象的 value 作为入口文件的路径。

2. output

output 配置项用于指定打包后的文件输出路径和文件名。它可以是一个字符串或一个对象。如果指定了一个字符串，则 webpack 会将打包后的文件输出到该路径下，并使用默认的文件名。如果指定了一个对象，则 webpack 会将打包后的文件输出到对象的 outputPath 属性指定的路径下，并使用对象的 filename 属性指定的文件名。

3. module

module 配置项用于指定 webpack 如何处理不同的模块。它可以是一个对象或一个数组。如果指定了一个对象，则 webpack 会将对象的 key 作为模块的名称，将对象的 value 作为模块的处理规则。如果指定了一个数组，则 webpack 会将数组中的所有对象作为模块的处理规则。

4. resolve

resolve 配置项用于指定 webpack 如何查找模块。它可以是一个对象或一个数组。如果指定了一个对象，则 webpack 会将对象的 key 作为模块的扩展名，将对象的 value 作为模块的查找路径。如果指定了一个数组，则 webpack 会将数组中的所有对象作为模块的查找路径。

5. mode

mode 配置项用于指定 webpack 的运行模式。它可以是 "development" 或 "production"。如果指定 "development"，则 webpack 会将打包后的文件输出到内存中，以便于快速迭代。如果指定 "production"，则 webpack 会将打包后的文件输出到磁盘上，以便于部署到生产环境。

6. devtool

devtool 配置项用于指定 webpack 如何生成 source map。它可以是 "none"、"inline-source-map"、"hidden-source-map"、"eval" 或 "cheap-module-source-map"。如果指定 "none"，则 webpack 不会生成 source map。如果指定 "inline-source-map"，则 webpack 会将 source map 生成到打包后的文件中。如果指定 "hidden-source-map"，则 webpack 会将 source map 生成到一个单独的文件中。如果指定 "eval"，则 webpack 会将 source map 生成到一个单独的文件中，但不会将 source map 内嵌到打包后的文件中。如果指定 "cheap-module-source-map"，则 webpack 会将 source map 生成到一个单独的文件中，但只会包含模块级别的 source map，不会包含行级别的 source map。

7. performance

performance 配置项用于指定 webpack 如何优化打包后的文件。它可以是一个对象或一个数组。如果指定了一个对象，则 webpack 会将对象的 key 作为优化的名称，将对象的 value 作为优化的值。如果指定了一个数组，则 webpack 会将数组中的所有对象作为优化。

8. optimization

optimization 配置项用于指定 webpack 如何优化打包后的文件。它可以是一个对象或一个数组。如果指定了一个对象，则 webpack 会将对象的 key 作为优化的名称，将对象的 value 作为优化的值。如果指定了一个数组，则 webpack 会将数组中的所有对象作为优化。

9. stats

stats 配置项用于指定 webpack 如何输出打包后的文件信息。它可以是一个字符串、一个对象或一个数组。如果指定了一个字符串，则 webpack 会将打包后的文件信息输出到控制台。如果指定了一个对象，则 webpack 会将打包后的文件信息输出到文件中。如果指定了一个数组，则 webpack 会将打包后的文件信息输出到控制台和文件中。

10. devServer

devServer 配置项用于指定 webpack 的开发服务器。它可以是一个对象或一个数组。如果指定了一个对象，则 webpack 会启动一个开发服务器，并使用对象的属性来配置开发服务器。如果指定了一个数组，则 webpack 会启动多个开发服务器，并使用数组中的每个对象来配置开发服务器。