# `webpack-cli`體驗零配置打包
本節默認認為已經安裝過Node和Npm.開發IDE使用的是[WebStorm 2018 3.6](http://www.jetbrains.com/webstorm/download/previous.html)
打造一個可以轉換ES6為ES5 以及 支持圖片(png,jpg,gif,webp)、less、sass/scss的webpack配置項，支持修改項目文件自動更新的功能。
## 全局安裝
`npm install webpack webpack-cli -g`
## 初始化項目
`npm init -y`
~~~
{
"name": "demo1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
}
}
~~~
這里面包含了`dependencies`為項目的依賴在通過`npm install XXX -S`或者`npm install yyy --save`會將xxx及版本號顯示在這個位置
`devdependencies`為開發環境依賴通過`npm install yyy -D`或者`npm install yyy --dev-save`
## 創建src/main.js和src/index.html
需求描述，通過jquery實現 ul>li無序列表中li的隔行換色功能。
**安裝jquery 項目中需要使用**
`npm install jquery -S`
**實現隔行換色**
`src/main.js`
~~~
import $ from "jquery"
$("ul li:even").css({background:'red'})
$("ul li:odd").css({background:'pink'})
~~~
## 執行命令
`webpack src/main.js -o dist/bundle.js`
**目錄結構**
~~~
dist
| ├─bundle.js
src
| ├─main.js
| ├─index.html
package.json
~~~
>[danger] dist文件夾：用于存放之后打包的文件
> src文件夾：用于存放我們寫的源文件
> main.js：項目的入口文件。具體內容查看下面詳情。
> index.html：瀏覽器打開展示的首頁html
> package.json：通過npm init生成的，npm包管理的文件
## 修改index.html引入打包后的js
~~~
……
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script src="../dist/bundle.js"></script>
……
~~~
## 章結
發現，我們要手動把js代碼引入，并且要手動打開瀏覽器去查看網頁。等我們后面學到`webpack-dev-server`中的`html-webpack-plugin`插件去解決。
## 項目源碼
`git clone https://github.com/highh5/webpack.git -b lesson-01`
\`\`
