webpack-初体验

57次阅读

共计 1456 个字符,预计需要花费 4 分钟才能阅读完成。

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

正文完
 0