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

 一、配置文件

 webpack 提供的 cli 支持很多的参数，例如 --mode ，但更多的时候，我们会使用更加灵活的配置文件来控制 webpack 的行为。
默认情况下， webpack 会读取 webpack.config.js 文件作为配置文件，但也可以通过 CLI 参数 --config 来指定某个配置文件。例：npx webpack --config vue.config.js。
配置文件中通过 CommonJs 模块导出一个对象，对象中的各种属性对应不同的 webpack 配置。

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

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

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

二、基本配置

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

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

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配置

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