（四）Webpack、Slot与Vue CLI脚手架

目录

四、Webpack、Slot与Vue CLI脚手架

4.1 Webpack：现代前端的“打包大师”

4.1.1 快速上手：安装与初体验

1. Webpack 简介

2. Webpack 安装与使用

步骤1：初始化项目

步骤2：安装依赖

步骤3：创建基础文件

(1) 创建 index.html 文件

(2) 创建 src/index.js 文件

4.1.2 Webpack 的基本配置

4.1.3 使用 webpack-dev-server 实现热更新

4.1.4 使用 html-webpack-plugin 自动生成 HTML

4.1.5 Loader：模块的“翻译官”

常用 Loader 配置实例：

(1) 处理 CSS (css-loader + style-loader)

(2) 处理 Less (less-loader)

(3) 处理 ES6+（babel-loader）

(4) 处理 HTML 热更新（raw-loader）

4.1.6 图片资源

4.2 Vue CLI

4.2.1 安装 Vue CLI

4.2.2 使用 Vue CLI 创建项目

第一步：创建项目

第二步：选择项目配置（新手推荐方案）

第三步：启动并预览项目

四、Webpack、Slot与Vue CLI脚手架

4.1 Webpack：现代前端的“打包大师”

随着前端项目变得越来越复杂，我们需要一种工具来帮我们更好地组织代码、管理资源，并让最终代码能在所有浏览器上顺畅运行。

Webpack 就是目前最主流的解决方案，它是一个强大的静态模块打