1. 当前 Web 开发所面临的困境
- 文件依赖关系错综复杂
- 静态资源请求效率低
- 模块化支持不友好
- 浏览器对高级 Javascript 特性兼容性低
- 等等....
面临这么多困境，怎么去解决呢？当然是 webpack 啦～
1. webpack 是什么？
webpack 是一个流行的 前端项目构建工具（打包工具），可以解决当前 Web 开发中所面临的困境。
webpack 提供友好的模块化支持，以及代码压缩混淆、处理 JS 兼容问题、性能优化等强大的功能，从而让程序员把工具的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。
2. webpack 的基本使用
2.1 创建列表隔行变色项目
- 新建项目空白目录，并在根目录终端运行如下命令，初始化包管理配置文件 package.json
npm init -y
- 新建 src 源代码目录，并且在 src 下面新建 index.html 首页，然后初始化 首页基本的结构，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 传统模式是如下引入，但是我们要用模块化思维 -->
<!-- <script src="./index.js"></script> -->
</head>
<body>
<ul>
<li>这是第 1 个li</li>
<li>这是第 2 个li</li>
<li>这是第 3 个li</li>
<li>这是第 4 个li</li>
<li>这是第 5 个li</li>
<li>这是第 6 个li</li>
<li>这是第 7 个li</li>
<li>这是第 8 个li</li>
<li>这是第 9 个li</li>
</ul>
</body>
</html>
- 在终端执行如下命令，安装 jQuery
npm install jquery -s
- 继续在 src 下面创建 index.js,并写入代码 如下
// 用 import 导入 jquery
import $ from 'jquery'
$(function(){
$('li:odd').css('background','blue')
$('li:even').css('background','lightblue')
})
此时运行 html 文件，会发现浏览器报错，为什么会报错呢？
因为 import 语法属于 ES6 的模块化语法，浏览器对这种语法支持并不友好，浏览器不识别，因此就会报错。
既然报错那又如何解决呢？请看下一篇文章 安装和配置