webpack基本使用和配置文件

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.htm