webpack 静态模块打包工具

webpack

为什么?

把静态模块内容,压缩,整合,转译等(前端工程化)

  • 把less/sass转成css代码
  • 把ES6+ 降级成ES5
  • 支持多种模块文件类型,多种模块标准语法

vite

为什么不直接学习vite 而学习webpack

因为很多项目还是基于webpack来进行构建的,所以还要掌握webpack

案例:封装utils包,校验用户名和密码长度 ,在index.js种使用,使用webpack打包

步骤:

1.新建项目文件夹,初始化包环境

2.新建src源代码文件夹(书写代码)

3.下载webpack webpack-cli 到项目(版本独立)

4.项目种允许工具命令,采用自定义命令的方式(局部命令)

5.自动产生dist分支文件夹(压缩和优化后,用于最终运行的代码)

总结:

在package.json中自定义命令

复制代码
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },

如何运行package.json 里的自定义命令

复制代码
npm run 自定义命令

修改webpack打包入口和出口

步骤:

1.项目根目录,新建webpack.config.js配置文件

2.导出配置对象,配置入口,出口文件路径

复制代码
//webpack.config.js
const path = require('path')

module.exports={
    // 入口
    entry:path.resolve(__dirname,'src/main.js'),
    // 出口  path 路径  filename 文件名
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'my-first-webpack.bundle.js'
    }
}

自动生成html文件

HtmlWebpackPlugin 简化了 HTML 文件的创建

步骤:

1.下载本地软件包

2.配置webpack.config.js让webpack拥有插件的功能

3.指定以public/index.html为模板复制到dist/index.html ,并自动引入其他打包后资源

复制代码
 plugins:[new HtmlWebpackPlugin({
        // 以指定的html文件为生成模板
        template:path.resolve(__dirname,'public/index.html')
    })]

打包css模块

注意:webpack默认只识别js和json文件内容

加载器 css-loader 解析css代码

加载器style-loader 把解析后的css代码插入到DOM

步骤:

1.准备css文件导入到src/main.js中 (压缩转移处理)

2.下载css-loader 和style-loader本地软件包

3.配置webpack.config.js 让webpack拥有该加载器功能

4.打包后运行dist/index.html

打包less模块

加载器 less-loader 把less代码编译为css代码,还需要依赖less软件包

步骤:

1.准备less样式导入到src/main.js中 (压缩转移处理)

2.下载less 和less-loader本地软件包

3.配置webpack.config.js 让webpack拥有该加载器功能

4.打包后运行dist/index.html

打包图片

webpack5 内置了资源模块的打包,无需下载额外的loader

步骤:

1.准备图片素材到src/assets中

2.在index.less中给body添加背景图

3.在main.js中给img标签添加logo图片

4.配置webpack.config.js 让webpack拥有该加载器功能

5.打包后运行dist/index.html

集成babel编译器

babel编译器:是一个JavaScript的语法编译器,采用ECMAScript 2015+ 语法编写的代码转换为向后兼容的JavaScript语法,以便能够运行在当前和旧版本的浏览器或其他环境中

babel-loader 让webpack可以使用babel转译JavaScript代码

复制代码
npm install -D babel-loader @babel/core @babel/preset-env

步骤:

1.编写一段映射数组元素,每个数值 +1 代码 (箭头函数)

2.下载babel babel-loader core 本地软件包

3.配置webpack.config.js 让webpack拥有该加载器功能

4.打包后运行dist/index.html

webpack开发服务器

webpack-dev-server 快速开发应用程序

作用:启动web服务,打包输出源码在内存,并检测代码变化热更新到网页

步骤:

1.下载webpack-dev-server 软件包到当前项目

2.配置自定义命令,并设置打包的模式为开发模式

复制代码
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev":"webpack serve --mode=development"
  },

3.使用npm run dev 启动开发服务器,热更新效果

打包模式

告知webpack使用相应模式的内置优化

分类:

模式名称 模式名字 特点
开发模式 development 调式代码,实时加载,模块热替换等
生产模式 production 压缩代码,资源优化,更轻量

设置:

方式1:在webpack.config.js配置文件设置mode选项

复制代码
module.exports={
    mode:'production'
  }

方法2: 在package.json命令行设置mode参数

复制代码
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=production",
    "dev":"webpack serve --mode=development"
  },

开发环境调错

sourcemap 可以准确追踪error和warning 在原始代码的位置

问题:代码被压缩和混淆,无法正确定位源代码位置(行数和列数)

设置:webpack.config.js 配置devtool选项

inline-source-map选项:把源码的位置信息一起打包在js文件内

注意:source map仅适用于开发环境,不要在生产环境使用(防止被轻易查看源码位置)

解析别名alias

解析别名:配置模块如何解析,创建import 或require的别名,来确保模块引入变得更简单

原来路径

复制代码
import {checkuser,checkpwd} from '../src/utils/check.js'
变成

import {checkuser,checkpwd} from '@/utils/check.js'

配置解析别名:在webpack.config.js中设置

相关推荐
袁煦丞31 分钟前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆32 分钟前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记42 分钟前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆42 分钟前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户214118326360243 分钟前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军44 分钟前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句1 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜1 小时前
CommonJS与ESM
前端·javascript
LaoZhangAI1 小时前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端
G等你下课1 小时前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试