原理:
打包在我们开发的过程中是一个将复杂的代码使用node环境下的webpack工具包压缩为一个代码文件,大大减少了代码的空间占用,提高浏览器解析的速率使用方法
一.用法讲解:
首先在使用的时候我们要了解什么是导入和导出?
导出:
在一个js文件中怎么将其中的代码放到一个总的js文件中显示呢?很多人都会想到用src或者link之类的引用方法,但在开发中我们往往为了提高代码的使用效率会使用导入和导出.
导出分为两种方式:默认导出和按需导出
默认导出: export default {导出的成员}
默认导入:import 接收名称 from '模块路径'
注意:默认导出只能导出一次 ;导入的时候的接收名称可以写任意的名称只要是合法的c成员名即可
按需导出: export 变量
按需导入:import {按需导入的名称} from'模块路径'
注意:每个模块中可以有多次的按需导出; 按需导入的成员名称必须和按需导出的名称一致;按需导入时可使用as关键之进行重命名
二. webpack介绍
webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具
- 静态： 项目中的静态资源如css、图片等文件
- 模块: js文件（模块化开发中，一切js文件皆为模块）
- 打包：主要帮你压缩代码，然后还会加密、混淆代码防止被人偷窥~
- 打包还有一个意思： 就是会把你项目中很多个文件压缩成一个文件
2.1webpack作用
- 分析、压缩、打包代码
2.2webpack好处
- 减少文件体积、减少文件数量
- 提高网页加载速度
三.webpack的功能实现原理
在实际的开发中使用功能的场景是:项目结束时打包运行或开发中项检查具体模块的功能实现程度
在打包工具运行的时候,首先要创建根目录,node在文件的根目录下运行,一切的工具包下载在此目录里面
四.webpack的打包流程
(1)node环境下初始化根目录 npm init -y
(2)下载webpack工具包 npm i webpack webpack-cli -D
(3)根目录创建src文件夹,并在此文件夹下创建名为index.js的文件(文件名一定要是这个),将目标代码写入此文件或与此文件形成依赖关系网
(4)使用固定命令打包npx webpack
五.webpack默认配置以及配置文件
我们在进行打包操作时,使用npx webpack命令进行的打包操作是系统默认的打包流程,打包的入口文件和出口问价以及打包的模式(生产or开发)等等设置均为系统的默认设置,那么怎么才能人为的手动设置成为我们自己想要的结果呢?此时就需要我们手动编辑打包的配置文件
常见配置创建的具体流程如下:
(1)在项目根目录下创建默认配置文件: webpack.config.js
(2)导入插件const HtmlWebpackPlugin = require('html-webpack-plugin')
(2)设置module.exports = {//自定义配置写在这里（对象键值对）}的相关属性
- 1.mode : 打包模式
- 默认值production : 生产模式（压缩，混淆，加密....... 不可读）
- development :开发模式(代码不会压缩 混淆)
- 2.output: 出口文件(对象类型)
- path : 设置出口文件夹（必须是绝对路径）
- 默认值:
${__dirname}/dist
- filename: 设置出口js文件名 (相对于path路径)
- 默认值:
main.js
- 3.entry : 入口文件
- 默认值(相当于项目根目录):
./src/index.js
六.webpack的其他配置
注意：这个配置是写在package.json文件中的script对象里面
6.1 build" : "webpack"
- 相当于是给你的当前项目新增了一个命令:
npm run build
- 这个命令等价于
npx webpack, 只是额外新增了一个命令。 原来的默认命令还是可以用
若我们在开发中想实现生产和开发代码分开编译打包,则可以创建一个名为 webpack.config.dev.js文件,在package.json文件中设置次命令dev": "webpack --config webpack.dev.js则会在项目里添加npx run dev命令,在此命令下系统会运行我们创建的webpack.config.dev.js的配置方式
七.npm run build 的运行原理
在运行我们自己的配置文件的命令下,系统是这样工作的:
(1)npm run build 命令后,系统会先检查package.json文件 里的自定义build命令;若找到则执行找不到则执行系统默认配置
(2) 执行webpack 命令: 若此命令里有相应的配置文件则执行配置文件里的相应参数若没有则执行默认文件配置
(3) 找到入口文件编译执行
(4)构建入口文件相关依赖图,并编译各个模块的文件
(5)输出结果到出口文件
八.webpack插件与加载器的使用
默认情况下, webpack只能处理js或json文件。 但是项目中不仅仅有js文件，还有其他一些资源文件如：css、html、图片等
插件作用 ： 给webpack添加额外的功能
8.1 loader 和 plugin
- 加载器（loader） : 让webpack识别编译更多的文件（如css、less、html以及图片等等）
- webpack中一切文件都是加载器
- 其他插件（plugin）：负责打包优化: 额外功能(如浏览器兼容性)
8.2webpack常用加载器
(1)html加载器
(2)css加载器
(3)less加载器
(4)图片加载器
这些加载器可在官网上查询使用:Loaders | webpack 中文文档 | webpack 中文文档 | webpack 中文网
相关使用方法则是在webpack.config.js文件中配置相关插件属性即可实现识别编译对应的文件
