前端工程化之：webpack1-5(配置文件)

一、配置文件

webpack 提供的 cli 支持很多的参数，例如 --mode ，但更多的时候，我们会使用更加灵活的配置文件来控制 webpack 的行为。

默认情况下， webpack会读取 webpack.config.js 文件作为配置文件，但也可以通过 CLI 参数 --config 来指定某个配置文件。例：npx webpack --config vue.config.js。

配置文件中通过 CommonJs 模块导出一个对象，对象中的各种属性对应不同的 webpack 配置。

注意：配置文件中的代码，必须是有效的 node 代码。

打包过程中是在 node 环境下运行的，需要读取配置文件的内容，所以只能使用 CommonJS 导出。需要进行打包的源代码在打包过程中不需要运行，只是读取代码分析依赖关系，所以两种模块化都支持。

当命令行参数与配置文件中的配置出现冲突时，以命令行参数为准。

二、基本配置

mode ： 编译模式 ，字符串，取值为 development 或 production ，指定编译结果代码运行的环境，会影响 webpack 对编译结果代码格式的处理。
entry ： 入口，字符串 (后续会详细讲解)，指定入口文件。
output ： 出口，对象(后续会详细讲解) ，指定编译结果文件。 filename 属性为指定出口文件名。

以下为配置文件 webpack.config.js ：

javascript 复制代码

module.exports = {
  mode: "development", // 打包环境，可以不写，默认生产环境
  entry: "./src/main.js", // 入口文件
  output: {
    // 出口文件
    filename: "bundle.js",
  },
};

三、devtool 配置

1、source map

source map 实际上是一个配置，配置中不仅记录了所有源码内容 ，还记录了和转换后的代码的对应关系。给开发者调试用。

source map 源码地图
webpack 中的 source map

最佳实践：

source map 应在开发环境中使用，作为一种调试手段。
source map 不应该在生产环境中使用， source map 的文件一般较大不仅会导致额外的网络传输，还容易暴露原始代码。即便要在生产环境中使用 source map ，用于调试真实的代码运行问题，也要做出一些处理规避网络传输和代码暴露的问题。

2、webpack 中的 source map

使用 webpack 编译后的代码难以调试，可以通过 devtool 配置来优化调试体验。

对于不同环境推荐的 devtool 配置推荐官网：

devtool配置

javascript 复制代码

// 隐藏源码地图
devtool: "none"
// 隐藏源码地图，但是有一些工具可以读取到
devtool: "hidden-source-map"
// 浏览器报错提示在源码，有源码地图
devtool: "eval"
// 将源码地图嵌入到打包后的main.js文件中
devtool: "eval-source-map"