webpack的初了解

一、什么是webpack?

webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；

webpack安装的两种方式

1. 运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
2. 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

初步使用webpack打包构建列表隔行变色案例

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

   这个过程就是在当前目录（E:\Workspace\my-npm-project)创建了一个名称为package.json的文件，并写入下面的信息

    name：包名
    version：版本，第一个数字一般为版本不兼容改动，第二个数字为版本兼容的功能修改，第三个为版本兼容的bug修复
    description：包的说明
    main：入口文件
    scripts：可执行的脚本命令
    keywords：关键字
    author：作者
    license：许可证书

2. 创建项目基本的目录结构

　　　　在项目根目录下创建src文件夹和index.js文件。

　　　　src存放源文件；index.js为包入口。

　　3. 使用cnpm i jquery --save安装jquery类库

　　4. 创建main.js并书写各行变色的代码逻辑：

　　　　// 导入jquery类库 import $ from 'jquery'

　　　　// 设置偶数行背景色，索引从0开始，0是偶数

　　　　$('#list li:even').css('backgroundColor','lightblue');

　　　　// 设置奇数行背景色

　　　　$('#list li:odd').css('backgroundColor','pink');

　　5. 直接在页面html上引用main.js会报错，因为浏览器不认识import这种高级的JS语法，需要使用webpack进行处理，

webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；

　　　　<!-- 因为 main 中的代码，涉及到了ES6的新语法，但是浏览器不识别 -->

　　　　<!-- <script src="./main.js"></script> -->

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

　　　　webpack src/js/main.js dist/bundle.js

　　　　<!-- 通过 webpack 这么一个前端构建工具， 把 main.js 做了一下处理，生成了一个 bundle.js 的文件 -->

　　　　<!-- <script src="../dist/bundle.js"></script> -->

　　  经过刚才的演示，Webpack 可以做什么事情？？？

　　1. webpack 能够处理 JS 文件的互相依赖关系；

　　2. webpack 能够处理JS的兼容问题，把 高级的、浏览器不识别的语法，转为 低级的，浏览器能正常识别的语法 刚才运行的命令格式：webpack 要打包的文件的路径 打包好的输出文件的路径