第4章 Webpack、Slot与Vue CLI脚手架
4.1 Webpack模块化打包工具
随着前端的发展，开发者往往会对一个项目进行工程化、模块化及自动化，而目前Webpack就是这一领域的代表。本章主要讲述Webpack，与Vue.js暂时没有关系，但自本章之后的所有章节，Vue.js的所有知识点将基于Webpack。
4.1.1 Webpack的简介与安装
1．Webpack简介
从本质上来讲，Webpack是一个静态模块打包工具。要想让项目中写好的模块化代码在各式各样的浏览器上能够兼容，就必须借助于其他工具，而Webpack的其中一个核心就是让开发人员可以进行模块化开发，并处理模块间的依赖关系。不仅是JavaScript文件，CSS、图片、JSON文件等在Webpack中都可以当作模块来使用，这就是Webpack的模块化概念。
2．Webpack安装
首先新建一个空白文件夹（本章将其命名为demo）作为项目，在项目的根目录下打开cmd，并执行项目初始化，代码如下：
#执行后生成package.json文件 npm init -y
注意 本章后续所有的命令行操作均在根目录下操作，后文将不再强调。
1）依赖安装
初始化项目后，可以进行Webpack安装，本章还需要借助jQuery框架实现部分示例，因此可以把jQuery一起安装，代码如下：
npm install webpack webpack-cli -D npm install jquery -S
注意 在上述命令行中，-D表示安装到package.json的开发依赖devDependencies（开发环境）对象里，也可以用--save-dev代替，而-S是--save的简写，这样安装会安装到dependencies（生产环境）对象里，也可以用--save代替。
安装完成后，可以看到初始化产生的package.json文件，代码如下：
注意 devDependencies与dependencies的区别在于：在发布npm包时，本身dependencies下的模块会作为依赖，一起被下载；devDependencies下面的模块就不会自动下载了，但对于项目而言，npm install会自动下载devDependencies和dependencies下面的模块。
2）创建入口文件
在项目的根目录下创建index.html文件，并写一个列表结构，代码如下：
然后在项目的根目录下创建src目录，再到src目录中创建index.js文件，在其中写入jQuery代码，用于实现列表隔行换色，代码如下：
import $ from 'jquery'
$('ul li:even').css({background: 'red'})
$('ul li:odd').css({background: 'green'})
到此，理论上已经可以实现隔行换色，但当浏览器打开后，真实的情况是出现了报错，如图4-1所示。
图4-1 隔行换色功能失效
为什么会报错？因为浏览器并不兼容以import引入模块这种方式，所以这里需要用到Webpack进行打包。
4.1.2 Webpack基本配置
在项目根目录下，新建webpack.config.js文件，这是Webpack的项目配置文件，此处可以在其中对入口文件、出口文件等配置进行定义，代码如下：
然后在package.json文件中配置打包命令，代码如下：
修改index.html文件，代码如下：
<script src="./dist/main.js"></script>
再用浏览器打开index.html文件查看效果，即可看到如图4-2所示的隔行换色效果。
图4-2 隔行换色效果
4.1.3 webpack-dev-server
虽然目前实现了隔行换色，但这时如果将index.html文件实现的背景颜色由green改成pink，则会发现即使浏览器刷新也没有效果，需要再运行一次npm run start命令才有用，这时就需要webpack-dev-server（热重载）。
想要使用webpack-dev-server，需要先进行安装，打开命令行，执行如下代码：
npm install webpack-dev-server -D
然后修改package.json文件中的项目启动命令，代码如下：
在以上代码中，--open表示项目运行后自动打开浏览器，--port表示服务监听端口，此处监听3002端口，--hot表示自动热更新。
注意 启动webpack-dev-server后，开发者在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中。如果开发者想看到main.js文件，则可以运行http://localhost:3002/main.js进行查看。
接下来，在index.html文件中可以对打包后的main.js文件进行引入，应当修改JS的路径，代码如下：
<script src="./main.js"></script>
至此，通过npm run start命令开发者仍然无法访问HTML页面，因为打包出来的dist被隐藏，并且也不包含index.html文件，所以会有Cannot GET /的警告，因此，还需要解决HTML的问题。
4.1.4 html-webpack-plugin
首先安装html-webpack-plugin，命令如下：
npm install html-webpack-plugin -D
然后修改webpack.config.js文件，代码如下：
接下来可以删掉index.html文件里面的main.js引用，因为html-webpack-plugin会自动把打包出来的bundle加到index.html代码里。重新运行npm run start命令，即可看到如图4-3的效果。
图4-3 隔行换色热更新
除此之外，还可以随意更改jQuery代码中的颜色代码，页面也会随之热更新。
4.1.5 loader
loader是Webpack用来对模块进行预处理的，在一个模块被引入之前，会预先使用loader处理模块的内容。
1．css-loader与style-loader
传统的CSS写法是在HTML文件中使用link标签引入CSS代码，借助Webpack的style-loader和css-loader可以在入口JS文件中引入CSS文件并让样式生效。css-loader是用来加载以.css结尾的文件的，style-loader的作用是使用<style>将css-loader内部样式注入HTML页面。
首先需要安装css-loader与style-loader，命令如下：
npm install css-loader style-loader -D
在webpack.config.js文件中进行loader配置，代码如下：
在src目录下创建index.css文件，书写一些样式类代码，代码如下：
body {
background: skyblue;
}
然后在index.js文件中引入index.css文件，并且重新执行npm run start命令，即可在修改CSS时看到页面样式的更新。
2．less-loader
如果开发者的项目使用了类似于Less这种预编译语言，则还需要安装并配置less-loader，命令如下：
npm install less-loader less -D
修改webpack.config.js文件中的module，代码如下：
4.1.6 babel
在真实项目开发中，前端开发人员往往不止使用ES5，而是使用ES6+ES5同时进行开发，而ES6在低版本浏览器中存在兼容问题，因此需要使用babel将其转换为ES5。
babel是非常有名的Webpack插件，需要先安装（安装的插件比较多），命令如下：
npm install babel-loader @babel/core @babel/plugin-proposal-class- properties @babel/plugin-transform-runtime @babel/preset-env @babel/runtime -D
然后需要对webpack.config.js进行配置，代码如下：
注意 Excelude表示排除掉node_modules下载的依赖项。
接下来测试babel，在src目录下的index.js文件中引入ES6语法，代码如下：
重新在命令行执行npm run start命令运行项目，打开内存中的bundle.js文件，可以看到这段代码的编译结果，最终代码如下：
var fn = function fn() {\n console.log(123);\n}
4.1.7 HTML热更新
目前本项目的Webpack配置只实现JS和CSS的热更新，假如开发者想要实现HTML的热更新，就需要使用raw-loader，命令如下：
npm install --save-dev raw-loader
在index.js文件中引入index.html文件，代码如下：
import '../index.html';
然后在webpack.config.js文件中配置raw-loader，代码如下：
重新执行npm run start命令即可实现HTML的热更新。
4.1.8 图片资源
Webpack搭建的项目中也需要加载图片资源，可以在webpack.config.js文件中进行配置，代码如下：
然后修改index.html文件，代码如下：
<div class="logo"></div> <img src="" alt="">
再在项目src目录下创建images目录，并到index.css文件中书写背景图片引入，代码如下：
再到index.js文件中，使用JS操作图片引入，代码如下：
import logo from "./assets/images/logo.png"
document.getElementsByTagName('img')[0].src = logo;
运行npm run start命令即可看到图片，或者运行npm run build命令查看打包后的结果，并双击dist/index.html文件手动打开页面查看效果。至此，关于Webpack日常开发中高频使用的知识点便已讲述完毕。
本节主要讲解了Webpack的基本配置、loader及plugin等主要内容。