# `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`
\`\`
