配置文件

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

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

#指定webpack打包时读取config.js而不是默认的webpack.config.js
npx webpack --config config.js

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

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

//webpack在打包的时候会读取该文件,该文件是js文件
//是在打包的时候(node环境下运行的),所以要符合node的代码规范
module.exports = {
  //指定打包的环境
   mode:"development"
  //指定打包的入口文件
  entry: "./src/main.js",
  //指定打包的出口文件
  output: {
    filename: "bundle.js", //指定打包的文件名
  },
};

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

json

//针对这一条，我们一般会在npm的脚本中设置dev和build命令来覆盖webpack的配置文件
//package.json
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode=production",//使用命令行覆盖配置文件中的mode字段
    "dev": "webpack --mode=development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  },
  "dependencies": {
    "jquery": "^3.4.1"
  }
}

基本配置：

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

配置文件 ​

配置文件