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