webpack1-打包流程

webpack1-打包流程

---

1. 初始化
   命令：npm init -y
   生成的文件：package.json
   在package.json中的scripts中添加
   “dev”: “webpack --mode development”
   “build”: “webpack --mode production”
   

2. 安装webpack
   2.1 安装全局webpack，安装过全局的webpack则跳过此步骤
   命令：npm i webpack -g
   2.2 安装项目webpack
   命令：npm i webpack -s -d
   生成的文件夹：node_modules
   生成的文件：package-lock.json
   
   2.3 安装项目webpack-cli
   命令：npm i webpack-cli

3. 拉取jquery
   命令：npm i jquery -S
   生成文件夹：node_modules/jquery
   

4. 编写xxx.js
   

5. 打包xxx.js
   命令：webpack 文件目录/xxx.js -o ./dist/xxx-bundle.js --mode development
   例：webpack ./src/js/myDemo.js -o ./dist/myDemo-bundle.js --mode development
   

6. 在html中引用xxx-bundle.js
   

7. 页面效果