webpack 初体验

1. 搭建 webpack 环境

1.1 安装

全局安装：npm i webpack webpack-cli -g
局部安装（推荐）：npm i webpack webpack-cli --save-dev

注意：webpack-cli 的作用是让我们能在命令行里使用 webpack 命令。

1.2 执行 webpack 命令

全局：webpack ./index.js
局部：
- npx webpack ./index.js npx 使用教程
- node_modules/.bin/webpack ./index.js
- 在 package.json 文件配置 scripts 字段，比如 "script": { "bundle": "webpack ./index.js" }，那么就可以通过 npm run bundle 执行（此命令中对应的 webpack，会先查找安装在当前项目下的 webpack，如果当前项目下未安装 webpack 则会查找安装在全局的 webpack）。

打包 ./index.js 文件，默认会在根目录生成一个 dist 文件夹，里面包含一个 main.js 文件。

1.3 其他命令

查看包信息：npm info webpack
安装指定版本：npm i webpack@4.25.0 --save-dev
查看安装版本：webpack -v

2. 配置文件

创建 webpack.config.js 文件，输入以下内容：

const path = require('path')

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

执行 npx webpack 命令即可，此时不再需要在命令后面跟上入口文件，webpack 会自动从 webpack.config.js 文件中的 entry 字段获取。

同样也可以使用你自定义的配置文件，使用 --config 选项，例如 npx webpack --config webpack.my.js。

3. 打包后的输出信息

修改一下 webpack.config.js 文件的内容，改成了多入口文件形式，以便更好地分析输出信息。

const path = require('path')

module.exports = {
  entry: {
    main: './index.js',
    main2: './index2.js'
  },
  output: {
    filename: 'bundle_[name].js',
    path: path.resolve(__dirname, 'dist')
  }
}

打包后的输出信息如下：

Hash: f2f01e6b4bafb3807b0b
Version: webpack 4.40.2
Time: 348ms
Built at: 2019-09-18 21:53:37
          Asset       Size  Chunks             Chunk Names
 bundle_main.js  957 bytes       0  [emitted]  main
bundle_main2.js  959 bytes       1  [emitted]  main2
Entrypoint main = bundle_main.js
Entrypoint main2 = bundle_main2.js
[0] ./index.js 27 bytes {0} [built]
[1] ./index2.js 28 bytes {1} [built]

Hash：本次打包的唯一标识
Version：webpack 版本
Time：打包耗时
Built at：打包日期
Asset：输出的文件
Size：输出文件体积

Chunks、Chunk Names 以及剩下的信息自行体会吧~