3、webpack的配置文件说明当使用webpack打包时会默认先找配置文件（webpack.config.js），没有

一、webpack的默认配置项

webpack-cli 使得我们可以在命令行运行webpack。

我们可以对比一下，webpack不做任何配置和配置之后打包结果有什么不同我们的例子是在index.js文件中分别引入了header.js、side.js、footer.js三个模块，然后打包index.js。

1、打包方式一：没有任何配置时（即:没有webpack.config.js文件）

打包命令：npx webpack ./src/index.js

$ npx webpack ./src/index.js
[webpack-cli] Compilation finished
Hash: c1c23e1096598377d358
Version: webpack 4.44.2
Time: 169ms
Built at: 2020/11/05 上午12:53:04
  Asset      Size  Chunks             Chunk Names
main.js  1.31 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js + 3 modules 812 bytes {0} [built]
    | ./src/index.js 123 bytes [built]
    | ./src/header.js 229 bytes [built]
    | ./src/side.js 230 bytes [built]
    | ./src/footer.js 230 bytes [built]

结果：生成一个dist文件夹，文件夹中生成一个main.js文件

2、打包方法二：创建webpack.config.js文件，内容设置为默认项

webpack.config.js文件的内容如下：

// 引入node的path模块
const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'main.js', // 输出的文件名
    path: path.resolve(__dirname, 'dist') // 输出文件的路径（__dirname指该配置文件所在的目录）
  }
}

打包命令：npx webpack

此时打包不用再指定要打包文件的路径，因为已经在webpack.config.js文件的entry字段中配置了

$ npx webpack
[webpack-cli] Compilation finished
Hash: b0ddda990ab61b7536be
Version: webpack 4.44.2
Time: 435ms
Built at: 2020/11/05 上午12:49:41
  Asset      Size  Chunks             Chunk Names
main.js  1.31 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js + 3 modules 812 bytes {0} [built]
    | ./src/index.js 123 bytes [built]
    | ./src/header.js 229 bytes [built]
    | ./src/side.js 230 bytes [built]
    | ./src/footer.js 230 bytes [built]

结果：生成一个dist文件夹，文件夹中生成一个main.js文件。和默认未配置时结果一样。

3、打包方法三：创建webpack.config.js文件，修改打包输出的路径和文件名

webpack.config.js文件的内容如下：

// 引入node的path模块
const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'bundle.js', // 输出的文件名
    path: path.resolve(__dirname, 'bundle') // 输出文件的路径（__dirname指该配置文件所在的目录）
  }
}

打包命令：npx webpack

$ npx webpack
[webpack-cli] Compilation finished
Hash: b0ddda990ab61b7536be
Version: webpack 4.44.2
Time: 139ms
Built at: 2020/11/05 上午1:11:13
    Asset      Size  Chunks             Chunk Names
bundle.js  1.31 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[0] ./src/index.js + 3 modules 812 bytes {0} [built]
    | ./src/index.js 123 bytes [built]
    | ./src/header.js 229 bytes [built]
    | ./src/side.js 230 bytes [built]
    | ./src/footer.js 230 bytes [built]

结果：生成一个bundle文件夹，文件夹中生成一个bundle.js文件。

二、webpack打包技巧

1、指定配置文件打包

当使用webpack打包时会默认先找配置文件（webpack.config.js），没有的话会使用webpack的默认配置项；
webpack默认配置文件名为webpack.config.js,如果想使用其它名称的配置文件打包的话需要指定配置文件名。如下：

npx webpack --config  anynameconfig.js

配置文件默认项（重要的内容再重复提一下）

// 引入node的path模块
const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'main.js', // 输出的文件名
    path: path.resolve(__dirname, 'dist') // 输出文件的路径（__dirname指该配置文件所在的目录）
  }
}

2、使用`npm scripts`优化打包命令

package.json文件修改如下，这样子修改后就和vue和react中的命令就很像了。

{
  "name": "learnwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "bundle": "webpack" // 使用bundel命令来执行webpack命令
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.44.2",
    "webpack-cli": "^4.1.0"
  }
}

注意：这里我们就可以使用npm run bundle代替npx webpack命令了。而且在scripts中我们写的是webpack而不是npx webpack

执行命令：npm run bundle

$ npm run bundle

> learnwebpack@1.0.0 bundle C:\web\learnwebpack
> webpack

[webpack-cli] Compilation finished
Hash: b0ddda990ab61b7536be
Version: webpack 4.44.2
Time: 136ms
Built at: 2020/11/05 上午1:30:27
    Asset      Size  Chunks             Chunk Names
bundle.js  1.31 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[0] ./src/index.js + 3 modules 812 bytes {0} [built]
    | ./src/index.js 123 bytes [built]
    | ./src/header.js 229 bytes [built]
    | ./src/side.js 230 bytes [built]
    | ./src/footer.js 230 bytes [built]

注意：这里我们使用的是npm命令而不是npx命令了。

3、webpack的配置文件说明