前端系列课程之前端项目构建

前端项目构建

目标：

1. 了解前端项目构建的用途
2. 掌握前端模块导入的语法
3. 掌握Webpack构建工具的使用

前端项目构建：

1. 前端项目的构建可以理解为编译，是要将源代码转化成宿主浏览器可以执行的代码，核心是对资源的管理，输出包括JS,CSS,HTML等资源

前端项目构建的作用：

1. 解决语言问题
   （1）ES6
   （2）Sass
   （3）HTML模板语言

2. 解决性能优化问题
   （1）打包文件模块
   （2）压缩资源文件

常见前端项目构建工具：

1. Gulp
   

2. Grunt
   

3. webpack
   

Webpack工具的使用

打包：

Webpack的概念：

1. 出口
2. 入口
3. Loader
4. 插件
5. 模式

例子：

Webpack的配置文件

1. Webpack.config.js必须保存在项目根文件夹中

Webpack的文件打包

1. 具体操作演示
2. 自动打包：
   （1）npm i webpack-dev-server –D
   （2）配置package.json文件
   （3）npm run dev –启动项目

Webpack的文件打包

1. Main.js加载外部文件（样式）演示
2. 步骤：
   (1) import 外部文件
   (2) npm i css-loader style-loader –D
   (3) 配置webpack.config.js文件