乐趣区

webpack-初体验

jiezi

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 以及剩下的信息自行体会吧~

退出移动版