## 流程使用
下載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.最終看到效果
