## 流程使用
下载nodeJs
切换到当前目录,命令node -v 和npm -v
### 1.生成项目依赖文件
```
// 执行后生成package.json文件
npm init -y
```
### 2.安装依赖
```
// 最后的参数-D是安装到package.json的开发依赖devDependencies对象里，也可以用 --save-dev代替
npm install webpack webpack-cli -D --save-dev
// -S是--save的简写，这样安装的话，会安装到dependencies对象里
npm install jquery -S
或者这样
npm install 包的名字 npm install webpack --save-dev
npm install webpack-cli --save-dev
```
如果慢的话，用淘宝镜像
#### 3.创建入口文件夹(src)与在文件文件夹(src)下，创建(index.js与html)
4.在index.js
```
import $ from 'jquery';
$('ul li:even').css({ backgroundColor: 'skyblue' });
$('ul li:odd').css({ backgroundColor: 'green' });
```
报错？
#### 5
```
// 执行命令
webpack index.js -o dist/bundle.js
```
6.启动项目(配置package.json)
```
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack index.js -o dist/bundle.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.40.2",
"webpack-cli": "^3.3.9"
},
"dependencies": {
"jquery": "^3.4.1"
}
}
```
```
7.// 生成 dist文件夹和bundle.js文件
npm run start
```
8.然后再把index.html原来引入index.js的地方改成是通过webpack生成的bundle.js
```
<!--index.html文件-->
<!--<script src="./index.js"></script>-->
<script src="./dist/bundle.js"></script>
```
9.最终看到效果
