webpack 复习（二）配置文件

配置文件

上一篇文章中有提到 webpack 的配置文件，其中有简单介绍一些。这篇文章来详细谈谈。

webpack 的配置文件是一个 JavaScript 文件，名为 webpack.config.js，该 js 文件导出一个对象，该对象即是 webpack 配置的对象。

webpack 是一个打包工具，它的作用是根据配置文件中的入口模块，进行模块的依赖分析，并不会运行源代码。

如果要自定义 webpack 配置文件，需自行创建 webpack.config.js 文件进行配置。

webpack 遵循 CommonJS 规范：

• 使用 require(..)导入其他模块
• 使用module.exports 、exports.xxx导出模块内容

webpack.config.js 文件默认内容如下：

module.exports = {
	// 配置项
	mode: 'production',
	entry: './src/index.js',
	output: {
		filename: './dist/main.js',
	},
}

简单来说，webpack 配置文件的作用就是，配置 webpack 以某种指定的格式进行打包输出。所以，webpack 配置文件的使用是很灵活的，最后你也会发现，同一个项目可以存在多个不同的配置文件。

更多配置文件信息，参考官方 webpack 中文文档。

模块化兼容性

webpack 内部做了模块化兼容，也就是说，webpack 内部编译时对 ES6 模块化语法做了兼容性，开发阶段可使用 ES6 模块标准语法导入、导出模块。在开发阶段可根据自己的偏好选择，但是最好不要精神分裂，使用 CommonJS 和 ES6 的混合语法。

举例：某个 js 模块中有import xx from './a.js' 的代码，webpack 同样可以读取 a.js 文件的内容。

import aModule from './src/a.js';
const _ = [];

export default = _;

常用配置

mode 模式

mode 配置表示 webpack 当前打包时的环境，有两个取值：

• development：开发环境；生成的打包文件中的代码可见；用于开发阶段
• production：生成环境；生成的打包文件中的代码是压缩过的，不可见；用于部署阶段

module.exports = {
  mode: 'development',
};

devtool

作用：方便开发调试，报错时，可定位错误代码在源码中的具体位置

常用值：

• source-map：打包结果中会多出一个 .map格式的 js 文件，当源码有错误时，在页面中可定位到源码位置。推荐使用
• eval：通过 eval 格式输出

入口和出口

entry 入口

entry 用来配置 webpack 打包的入口模块。默认情况下，entry 的值是一个字符串./src/index.js，表示 JS 文件的入口模块。

module.exports = {
  entry: './src/index.js',
};

但入口模块可能有多个，而且模块不仅仅只有 js 模块，可能会有 css、html等模块。故 entry 的值，可配置成对象格式。具体格式如下：

module.exports = {
  entry: {
    index: './src/index.js',
    main: './src/main.js',
  },
};

注意：路径里面的 ./表示，webpack.config.js 文件的相对路径

output 出口

output 用来配置 webpack 打包成功后，如何输出。默认情况下，打包结果输出到当前工程的dist目录下。output 是一个对象。

module.exports = {
  output: {
    filename: 'main.js',
  },
};

可配置输出的文件的文件夹：把打包后的 js 文件放到 dist\js 目录中

• 默认情况下， output 对象的 filename 的值表示，打包结果输出 dist 目录下

module.exports = {
  output: {
    filename: 'js/main.js',
  },
};

可配置输出的文件目录：把打包后的所有文件放到 工程根目录\production目录中

• output 对象的 path 属性：绝对路径值
• 借助 nodejs 内置 path 模块，进行路径解析

const path = require('path');
module.exports = {
  //...
  output: {
    path: path.resolve(__dirname, 'production'),
    filename: 'js/main.js',
  },
};

灵魂画手总结图

环境区分

上面 mode 配置的其实就是环境。开发环境和生产环境的配置可能会存在差异，可以做一个通用的配置，根据环境的不同采用不同的配置文件。

webpack-cli 命令在打包时，可以传一个环境参数 --mode； webpack.config.js 配置文件可导出一个函数，该函数可接收一个环境参数，即 --mode 的值。

webpack ^5.70.0; webpack-cli ^4.9.2 的配置如下：

webpack --env dev // 表示 { dev: true }
webpack --env dev=2  // 表示 { dev: 2 }
webpack --env prod  // 表示 { prod: true }

上面的配置跟官网上的介绍有点不同，具体为什么我也不是特别清楚，具体哪种方式有效就用哪种吧。官网配置参考 webpack-cli 命令行。

webpack.config.js 接收环境对象参数：

module.exports = (env) => {
  console.log(env);
  if (env && env.prod) {
    return {
      mode: "production",
    }
  } else {
    return {
      mode: "development",
    }
  }
}

既然在 JS 中能拿到环境的值，就可以做逻辑判断，根据环境值来使用不同的配置。如下列举可能会用到的配置文件：

• webpack.dev.js：开发环境特有配置项，导出配置对象；
• webpack.prod.js：生产环境特有配置项，导出配置对象；
• webpack.base.js：开发环境、生产环境共同的配置项，导出配置对象；
• webpack.config.js：用于任意组合相同、生产环境、开发环境的配置，合并出最终的配置；

比如：

// webpack.config.js
const baseConfig = require('./webpack.base');
const prodConfig = require('./webpack.prod');
const devConfig = require('./webpack.dev');
module.exports = (env) => {
  console.log(env);
  if (env && env.prod) {
    return {
      ...baseConfig,
      ...prodConfig,
    }
  } else {
    return {
      ...baseConfig,
      ...devConfig,
    }
  }
}

// webpack.base.js
const path = require('path');
module.exports = {
  entry: "./src/index.js", // 打包时的入口文件
  output: {
    // filename: "js/main.js", // 打包结果的输出文件名：dist 目录下的文件
    path: path.resolve(__dirname, 'production'),
    filename: 'js/[name].[chunk:5].js',
  },
}

// webpack.dev.js
module.exports = {
  mode: "development",
  devtool: 'source-map', // 使用源码地图 source map，目的是便于调试 精准定位代码报错的源代码模块位置
}

// webpack.prod.js
module.exports = {
  mode: "production",
  devtool: "",
}

注意事项

1. webpack.config.js 文件的内容，在 webpack 打包过程中是需要执行的。
2. 被打包的源代码，在 webpack 打包过程中不会执行。

来点面试题

1. 配置内容如下，下面的代码会输出什么？

const path = require('path');

console.log(a); // 该行代码会在打包时报错
module.exports = {
  mode: "development",
  entry: "./src/index.js", // 打包时的入口文件
  output: {
    filename: "js/main.js", // 打包结果的输出文件名：dist 目录下的文件
  },
  devtool: 'source-map', // 使用源码地图 source map，目的是便于调试 精准定位代码报错的源代码模块位置
}

2. webpack 打包后的 js 文件代码中有很多重复冗余的代码，会导致什么问题？

下一篇文章揭晓答案~~~~