# webpack 概述
>本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
>可以从这里了解更多关于 JavaScript 模块和 webpack 模块的信息。
从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：
**入口(entry)
输出(output)
loader
插件(plugins)**
[webpack官网](https://webpack.js.org/)
## webpack 能做什么
webpack是一个静态模块打包器
1. 语法转换
+ less/sass/stylus转换成css
+ ES6转换成ES5
+ ...
2. html/css/js 代码压缩合并 (打包)
3. webpack可以在开发期间提供一个开发环境
+ 自动打开浏览器
+ 保存时自动刷新
4. 项目一般先打包再上线
# webpack 的基本使用
## webpack基本打包配置
1. 建目录 dist src/main.js
2. 初始化
```
yarn init -y
```
3. 安装依赖包 (-D 将依赖记录成开发依赖, 只是开发中需要用的依赖, 实际上线不需要的)
```
yarn add webpack webpack-cli -D
```
4. 到package.json文件中, 配置scripts
```js
scripts: {
"build": "webpack --config webpack.config.js"
}
```
5. 提供 webpack.config.js
参考文档: [https://webpack.docschina.org/concepts/#entry](https://webpack.docschina.org/concepts/#entry)
```js
const path = require('path')
module.exports = {
// entry: 配置入口文件 (从哪个文件开始打包)
entry: './src/main.js',
// output: 配置输出 (打包到哪去)
output: {
// 打包输出的目录 (必须是绝对路径)
path: path.join(__dirname, 'dist'),
// 打包生成的文件名
filename: 'bundle.js'
},
// 打包模式 production 压缩/development 不压缩
mode: 'development'
}
```
6. 执行配置的scripts脚本
```
yarn build
```
小测试:
假定在main.js中导入一个 aa.js, 多个文件需要打包, wepack会打包成一个文件, 可以节约请求的次数
```js
require('./aa.js')
console.log('这是main模块')
```
## 基于 webpack 实现隔行变色
- 新建 public/index.html 编写代码
- 在 index.html 中新建一些 li 玩玩
```html
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<meta content="ie=edge" http-equiv="X-UA-Compatible"/>
Document
<body>
- 我是第1个li
- 我是第2个li
- 我是第3个li
- 我是第4个li
- 我是第5个li
- 我是第6个li
- 我是第7个li
- 我是第8个li
- 我是第9个li
