1. 了解webpack
(1) webpack是静态模块打包器
(2) 能翻译和压缩代码
(3) 减小代码包体积,让浏览器更快速打开网页
2. 使用webpack的方法
注意: webpack是基于nodejs的,所以一定要安装了node才能使用
比如:
(1) 任意新建一个空文件夹 , 进入文件内部 用 npm init --yes 命令生成一个package.json
(2) 创建三个文件 index.html index.js tool.js 并书写自己的代码 ,结构如下:
(3) 安装webpack 并 验证是否安装成功
命令：npm i webpack webpack-cli -D
(4)以模块化的方式来修改:
- 在tool.js中导出模块
- 在index.js中使用模块
(5) 使用webpack来处理index.js
命令: npx webpack 文件名
(6) 在index.html中引入打包后的js
3. 配置文件
(1) 创建默认配置文件: 在项目根目录下创建一个名为webpack.config.js
注: 打包方式有两种:
- mode: ' development ' ----> 适用于开发模式 代码多
- mode: ' production ' ----> 适用于生产模式 代码少且加密
(2) 运行打包命令 , 可以查看产生的 main.js文件的内容
(3)入口文件和出口文件
在webpack中，默认的入口和出口分别是：
- 默认入口是：./src/index.js
- 默认出口是：./dist/main.js
a.设置入口文件的方法:
在webpack.config.js的配置项中添加 entry项
b.指定出口文件:
在webpack.config.js中设置output项
说明：
- output中的filename用来指定打包后的文件名字。
- output中的path用来指定打包后的路径。注意：它必须是绝对路径。所以，这里引用path模块中的join和__dirname来生成绝对路径。
- 如果path中的路径不存在，它会自动创建。
4. 简化打包命令---定制script
可以在package.json中添加script命令来快速启动webpack，格式如下：
"scripts": {
"自定义命令名": "要具体执行的代码",
}
可以在根目录下的小黑窗中通过: npm run build, npm run dev 来运行
