干货分享前端开发的必备技能--webpack打包

最新推荐文章于 2024-05-29 18:42:23 发布

只昂张327

最新推荐文章于 2024-05-29 18:42:23 发布

阅读量2k

点赞数

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/weixin_71171795/article/details/128070345

版权

原理:

打包在我们开发的过程中是一个将复杂的代码使用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的配置方式