webpack__模块打包工具

目录

1、webpack基本概念

        1.1_webpack基本概述  

2、webpack使用步骤 

2.1 安装Yarn

2.2 环境准备 

2.3 webpack基础使用

2.4 webpack再次打包 

3、webpack的配置 

3.1 webpack-入口和出口 

3.2 yarn build执行流程图 

3.3 案例-隔行变色

3.4 html-webpack-plugin插件 

3.5 webpack打包css文件 

3.6 webpack-使用加载器

3.7 webpack处理less文件 

3.8 webpack处理图片文件  

3.9 webpack加载文件优缺点  

3.10 webpack处理字体图标

3.11 webpack对JS语法降级

4、webpack开发服务器 

4.1_webpack-dev-server模块使用

4.2_webpack-dev-server配置 

---

#博学谷IT学习技术支持#

1、webpack基本概念

1.1_webpack基本概述  

 webpack本质是, 一个第三方模块包, 用于分析, 并打包代码 

支持所有类型文件的打包

支持less/sass => css

支持ES6/7/8 => ES5

压缩代码, 提高加载速度

2、webpack使用步骤 

2.1 安装Yarn

建议通过npm 包管理器安装 Yarn

安装 npm 后，您可以运行以下命令来安装和升级Yarn： 

npm install --global yarn

 通过如下命令测试 Yarn 是否安装成功：

yarn --version

2.2 环境准备 

1. 初始化包环境 

yarn init

 

生成一个文件：

  

2. 安装依赖包 

 yarn add webpack webpack-cli -D

3. 配置scripts (自定义命令) 

在package.json 文件里配置自定义命令

 

2.3 webpack基础使用

webpack基础使用 

需求： 2个js文件 ->打包成1个js文件 

分析： 

①： 新建src下的资源

②：add.js – 定义求和函数并导出

③：index.js – 引入add模块并使用函数输出结果

④：执行 `yarn build` 自定义命令, 进行打包 (确保终端路径在src的父级文件夹)

⑤：打包后默认生成dist和main.js, 观察其中代码

 

在终端执行 ：

yarn  build

生成dist 文件 

 

小结： 

1. 默认src/index.js – 打包入口文件

2. 需要引入到入口的文件才会参与打包

3. 执行package.json里build命令, 执行webpack打包命令

4. 默认输出dist/main.js的打包结果

2.4 webpack再次打包 

需求：代码更多后, 如何打包呢?

分析：

①：src下新建tool/tool.js

②：定义数组求和函数导出

③：index.js – 引入tool模块的函数并使用, 打印结果

④：执行 `yarn build` 自定义命令, 进行打包 (确保终端路径在src的父级文件夹)

⑤：打包后默认生成dist和main.js, 观察其中代码