前端工程化

模块化：js代码模块化

组件化：UI结构、样式组件化

webpack的基本使用

创建列表隔行变色项目:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./index.js"></script>
</head>
<body>
    <ul> <!-- 输入 ul>li{这是第 $ 个 li}*9 可快速生成-->
        <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>

// 1.使用ES6导入语法，导入jQuery
import $ from 'jquery'

// 2.定义jQuery的入口函数
$(function() {
    // 3.实现奇偶行变色
    // 奇数行为红色
    $('li:odd').css('background-color', 'red')
    // 偶数行为粉色
    $('li:even').css('background-color', 'pink')
})

效果:

代码有兼容性问题，网页跑不起来

安装和配置webpack

在项目中安装webpack

npm install 包 -S 中 -S 是 --save的简写, 把安装的包记录在dependencies下，表示这个包在项目开发阶段和上线阶段都需要用到

npm install 包 -D 中 -D 是 --save-dev的简写，把安装的包记录在devDependencies下，表示这个包仅在项目开发阶段用到
在项目中配置webpack

了解mode可选值

指定webpack的entry和output

自定义打包的入口与出口

问题：每一次修改源代码，都需要重新npm run dev打包才能看到效果

安装和配置webpack-dev-server这个插件

安装

安装有个坑点:

容易附带安装不兼容版本的webpack-cli, 从而导致最后运行webpack serve时报错，无法成功启动webpack-dev-server

最稳妥的安装方法:

先清理掉可能存在的原有版本：

npm uninstall webpack-cli

npm uninstall webpack-dev-server

再安装我已验证可以成功使用的版本：

npm install webpack-dev-server@3.11.2 -D

npm install webpack-cli@4.10.0 -D

安装完成后, package.json文件中的devDependencies中各个包的版本应该如此:
配置

配置完成后，会发现即使控制台中显示发生了热加载，但通过http访问页面还是没有变化。原因如下:

控制台中显示输出文件是在根目录，但其实我们在根目录中根本没有发现bundle.js这一输出文件，是因为webpack-dev-server为了热加载的高效(快速)，将生成文件存放在内存中了，而不是频繁往磁盘写入。

根目录中看不到bundle.js文件(不在磁盘中)：

尝试在根目录访问bundle.js文件(但在内存中):

所以我们为了方便看到热加载效果，作以下更改: