webpack4教程：打包构建列表隔行变色

使用webpack4创建项目，打包第一个JS文件

1. 命令行输入npm i webpack -q，全局安装 webpack

2. 在项目的根目录下(按住 shift 键 + 鼠标右键 进入项目根目录) 运行npm i webpack --save-dev 安装到项目依赖中

3. 创建项目初始结构。dist文件夹存放的是打包过后的资源文件
   

4. 运行npm init -y 初始化项目，使用npm管理项目中的依赖包

5. 使用 npm i jquery -s 安装 jQuery类库

   到这一步为止，项目基本结构大致成形
   
   

6. 在 main.js 里设置隔行变色

import $ from 'jquery'

$(function() {
    $('li:odd').css('backgroundColor','red')
    $('li:even').css('backgroundColor',function(){
        return '#' + 'D97634'
    })
})

7. 运行webpack 入口文件路径 输出文件路径对main.js进行处理。运行

webpack src/main.js -o dist/bundle.js
命令格式：  webpack 要打包的文件路径	打包好的输出文件路径

注意如果提示没有webpack-cli,安装:

npm install webpack-cli -g

8. index.html 中引入 <script src="../dist/bundle.js"></script>

---

两种方式实现打包：
1.通过命令格式：webpack 要打包的文件路径 打包好的输出文件路径
2.通过 webpack 命令（可实现多次打包修改后的JS文件）

• 首先创建 webpack.config.js 文件
  

• 执行 webpack 命令
  
  使用 webpack 命令说明：

	当我们在 控制台，直接输入 webpack 命令执行的时候，webpack 做了以下几步：
  	1.首先，webpack发现，我们并没有通过命令的形式（webpack src/main.js -o dist/bundle.js），给它指定入口和出口
   	2.webpack 就会去 项目的根目录中，查找一个叫做 'webpack.config.js' 的配置文件
   	3.当找到配置文件后，webpack 会去解析执行这个 配置文件，当解析执行完配置文件后，就得到了配置文件中导出的 配置对象
   	4.当 webpack 拿到 配置对象后，就得到配置对象中指定的 入口 和 出口，然后进行打包构建。