Web工程化

1、webpack
1.1 概念

一个前端打包器。

webpack 只识别javascript. 所以需要安装nodejs环境。

1.2 运行环境

Nodejs

Nodejs 是运行JavaScript的环境。

因为nodejs发布了许多版本，在不同的技术栈下，需要使用不同的nodejs。

所以需要在电脑上安装nvm软件管理nodejs版本

1.3 nvm

是为了管理nodejs环境！

win + R 输入cmd 按回车按键

在终端输入: nvm --version

显示版本号说明安装成功!

以下是 nvm 的常用操作指令：
查看可在线安装的NodeJS版本
nvm list available安装指定版本的 Node.js。
nvm install <version>切换到指定版本的 Node.js。
nvm use <version>列出已安装的所有 Node.js 版本。
nvm ls 或 nvm list显示当前正在使用的 Node.js 版本。
nvm current为指定的版本创建别名。
nvm alias <name> <version>删除指定版本的别名。
nvm unalias <name>卸载指定的 Node.js 版本。
nvm uninstall <version>重新安装指定版本的 Node.js，并将全局包重新安装到新版本中。
nvm reinstall-packages <version>在指定版本的 Node.js 环境下执行特定命令。
nvm exec <version> <command>显示 NVM 的版本信息。
nvm --version1、nvm install ：安装指定版本的Node.js，例如nvm install 18.16.1。2、nvm use ：切换到指定版本的Node.js，例如nvm use 18.16.1。3、nvm current：显示当前正在使用的Node.js版本。4、nvm ls：列出所有已经安装的Node.js版本。5、nvm alias ：为指定版本创建一个别名，例如nvm alias default 18.16.1。6、nvm uninstall ：卸载指定版本的Node.js，例如nvm uninstall 18.16.1。7、nvm reinstall-packages ：在切换Node.js版本后，重新安装已安装的全局npm包。8、nvm on：打开nvm自动切换。9、nvm off：关闭nvm自动切换。
nvm :  管理nodejs的工具
npm ： 管理包的工具
新一代的包管理工具
yarn
pnpm 
npm   install   xxx      表示安装xxx依赖的意思
npm  uninstall   xxx   表示卸载xxx依赖的意思npm   install   xxx  --save-dev  
npm   install   xxx  -D     
项目在开发环境下所需要的依赖npm   install   xxx  --save
npm   install   xxx  -S
项目在开发环境或者生产环境下的依赖npm install   根据package.json下载项目所需的依赖
npm i   和 npm install  一样的作用，都是表示安装、下载的意思
可以在npmjs.com这个网站上搜索 “依赖包”
1.4 构建web项目工程

1）创建项目目录

2）安装webpack 所需要依赖

3）配置 webpack.config.js

// 导入path模块
const path = require('path');// 配置
const option = {// 入口文件entry: {index: "./src/index.js"},// 打包模式// development: 开发环境// production: 生产环境mode: "production",// 输出目录output: {path: path.resolve(__dirname, 'dist'),filename: 'boundle-[hash].js',},
}// 配置选项
module.exports = option;

4)  运行项目

5）打包项目

1.5 webpack 打包环节遇到的问题

1） 安装时尽量是采用默认路径，减少出错

2）下载依赖包出现网络问题，下载慢 （配置淘宝镜像）

在终端输出以下命令

npm config set registry https://registry.npm.taobao.org

或恢复

npm config set registry https://registry.npmjs.org

设置

1、设置淘宝镜像

默认的官方镜像：https://registry.npmjs.org，切换国内淘宝镜像，访问下载更快。

npm config set registry https://registry.npmmirror.com/

其他，如pnpm：

pnpm config set registry https://registry.npmmirror.com/

2、查看源

npm config get registry

3、切回官方镜像

npm config set registry https://registry.npmjs.org/

npm config set registry https://registry.npmjs.org/

3）路径问题

4）Window下powershell无法运行docsify,npm,vue等命令

在powershell执行npm等相关指令报错：

无法加载文件 D:\Soft\Nodejs\node_global\docsify.ps1，因为在此系统上禁止运行脚本。

1. 在Windows系统搜索powershell，以管理员运行：

2. 在命令框输入： set-ExecutionPolicy RemoteSigned， 然后输入A

3、再进入你的目录打开powershell就可以了

2、webpack 如何使用？

1、 安装nodejs环境（运行JS）

2、构建项目下载webpack所需的依赖

创建web目录

在这个目录下，打开终端(cmd/powershell)

npm install webpack  webpack-cli  --save-dev

3、创建webpack.config.js文件，就开始填写配置

webpack.config.common.js
webpack.config.dev.js
webpack.config.prod.js

4、配置哪些选项

入口文件

插件

loader (css / less / sass / 图片)

打包模式

....

5、在package.json文件配置脚本

"scripts": {"build": "npx webpack --config webpack.config.js","dev": "npx webpack  serve --config webpack.config.dev.js","serve": "npx webpack  serve --config webpack.config.dev.js","start": "npx webpack  serve --config webpack.config.dev.js","prod": "npx webpack --config webpack.config.prod.js"},

6、在src目录下编写项目

需要css

需要js

需要图片

这些静态资源都可以import到入口文件中

7. 开发环境和生产环境相分离

webpack.config.common.js

// 导入path模块
const path = require('path');
// 处理html模板的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 清除冗余文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 分离css文件（提取css代码）
const MiniCssExtractPlugin = require("mini-css-extract-plugin");// 配置
const option = {// 入口文件entry: {index: "./src/index.js"},// 打包模式// development: 开发环境// production: 生产环境// mode: "production",// 输出目录output: {// 设置输出的目录path: path.resolve(__dirname, 'dist'),// 设置输出的js文件filename: 'js/boundle-[hash].js',},// 配置loader (加载器)module: {rules: [{test: /\.css$/i,use: [{loader: MiniCssExtractPlugin.loader,options: {publicPath: "",},},"css-loader"],},{test: /\.less$/i,use: [{loader: MiniCssExtractPlugin.loader,},"css-loader","less-loader",],},{test: /\.s[ac]ss$/i,use: [// 把js样式对应的脚本写入bundle.js文件// "style-loader",{loader: MiniCssExtractPlugin.loader,},// 把css转换成js"css-loader",// 编译sass成css"sass-loader",],},{test: /\.(png|jpg|gif)$/i,use: [{loader: 'url-loader',options: {// 超出8kb,就不转换成base64格式// 限制  小于等于8kb的图片，做成base64格式// 8192/1024 = 8kblimit: 8192,// 禁用严格模式esModule: false,// 设置输出的文件路径// outputPath: 'images',name: './images/[name]_[hash].[ext]',},},],},],},// 配置插件plugins: [// 设置模板new HtmlWebpackPlugin({title: "主页",template: "./src/index.html",// 模板路径filename: 'index.html',// 输出html的文件名称inject: "head",// 插入脚本的位置chunks: ['index'],// 插入哪些脚本文件}),// 清理冗余文件new CleanWebpackPlugin(),// 提取cssnew MiniCssExtractPlugin({filename: "css/[name].css",})]
}
// 配置选项 (暴露)
module.exports = option;

webpack.config.dev.js

// 开发环境
const common = require("./webpack.config.common");
const path = require("path");
// 导入合并模块的包
const { merge } = require("webpack-merge");
// const webpackDevServer = require('webpack-dev-server');// 配置开发环境
module.exports = merge(common, {mode: "development",// 开启http服务devServer: {// 设置需要运行目录// static: "./dist",static: path.resolve(__dirname, 'dist'),// 设置服务的端口port: 8080,// 自动打开页面open: true,// 设置保存更新页面hot: true,// 旧版本// proxy: {//     "/api": {//         // 目标//         target: "https://www.gaokaozhitongche.com",//         // // 设置跨域//         // changeOrigin: true,//         // // 设置重载//         // pathRewrite: {//         //     "^/api": ""//         // }//     }// }// 提供数据的服务器地址：// 后台// http://localhost:3000/test// 前端// http://localhost:8080// 通过修改url// http://localhost:8080/api/test// http://localhost:8080/test// 新版本proxy: [// {//     context: ['/', '/xpi'],//     target: 'http://localhost:3000',// },{context: ['/', '/api'],target: 'https://www.gaokaozhitongche.com',secure: false,changeOrigin: true,},],}// 别人的后台// https://www.gaokaozhitongche.com// https://www.gaokaozhitongche.com/api/v2/ranks/index-top3// 我的前端// http://localhost:8080// 做网络代理后// http://localhost:8080/api/v2/ranks/index-top3
})

webpack.config.prod.js

// 生产环境
const common = require("./webpack.config.common");
// 导入合并模块的包
const { merge } = require("webpack-merge");
// 导入用于压缩css代码的依赖包
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// 移除console.log代码
const TerserPlugin = require("terser-webpack-plugin");
// 配置生产环境
module.exports = merge(common, {mode: "production",//优化项目代码optimization: {// 是否压缩代码minimize: true,// 去除console.log()代码minimizer: [// 是否删除调试程序的代码new TerserPlugin({terserOptions: {compress: {// 是否删除项目中的console.log()drop_console: true}}}),// 用于css代码压缩new CssMinimizerPlugin()],},})
3、Git工作流程

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/37955.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

web应用技术-第十一次课后作业

web应用技术-第十一次课后作业

验证过滤器进行权限验证的原理。 Filter过滤器&#xff1a;可以把对资源的请求拦截下来&#xff0c;从而实现一些特殊的功能。一般完成登录校验、统一编码处理、敏感字符处理等通用操作。 定义&#xff1a;实现Filter接口 配置&#xff1a;WebFilter(urlPatterns"/*&qu…
阅读更多...
常见VPS主机术语有哪些？VPS术语解析

常见VPS主机术语有哪些？VPS术语解析

常见VPS主机术语有哪些&#xff1f;本期为大家解析一下我们常见到的听到的VPS专业术语&#xff0c;帮助大家更轻松的了解VPS主机相关知识。 常见VPS主机术语 Apache – 世界上最流行的 Web 服务器软件。 CentOS – 旨在提供基于 Red Hat Enterprise Linux 的企业级操作系统的…
阅读更多...
mysql 主主HA高可用方案详解

mysql 主主HA高可用方案详解

1.环境准备&#xff1a; 主机&#xff1a;1921.4,1921.5 操作系统&#xff1a;centos 7.3 mysql数据库版本&#xff1a;mysql 5.7.13 浮动IP:1921.182 2.mysql 下载及解压安装配置 2.1 下载&#xff1a; #wget http://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.13-linu…
阅读更多...
easyexcel 模板填充Excel数据，实现自定义换行及动态调整行高，并保持列表格式一致

easyexcel 模板填充Excel数据，实现自定义换行及动态调整行高，并保持列表格式一致

pom依赖&#xff1a; <dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>5.2.5</version> </dependency><dependency><groupId>com.alibaba</groupId><artifa…
阅读更多...
数据结构-线性表的应用

数据结构-线性表的应用

目录 前言一、有序表的合并1.1 顺序表实现1.2 单链表实现 二、稀疏多项式的相加和相乘2.1 稀疏多项式的相加2.2 稀疏多项式的相乘 总结 前言 本篇文章介绍线性表的应用&#xff0c;分别使用顺序表和单链表实现有序表的合并&#xff0c;最后介绍如何使用单链表实现两个稀疏多项…
阅读更多...
基于springboot+vue+uniapp的超市售货管理平台

基于springboot+vue+uniapp的超市售货管理平台

开发语言&#xff1a;Java框架&#xff1a;springbootuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#…
阅读更多...
考研生活day2--王道课后习题2.3.1、2.3.2、2.3.3

考研生活day2--王道课后习题2.3.1、2.3.2、2.3.3

2.3.1 题目描述&#xff1a; 这题和曾经做过的LeetCode203.移除元素一模一样&#xff0c;所以我们就使用LeetCode进行书写&#xff0c;题目链接203. 移除链表元素 - 力扣&#xff08;LeetCode&#xff09; 解题思路 大家的第一反应肯定是根据书上所学的书写方法一样书写&…
阅读更多...
【PB案例学习笔记】-26制作一个带浮动图标的工具栏

【PB案例学习笔记】-26制作一个带浮动图标的工具栏

写在前面 这是PB案例学习笔记系列文章的第26篇&#xff0c;该系列文章适合具有一定PB基础的读者。 通过一个个由浅入深的编程实战案例学习&#xff0c;提高编程技巧&#xff0c;以保证小伙伴们能应付公司的各种开发需求。 文章中设计到的源码&#xff0c;小凡都上传到了gite…
阅读更多...
爬虫cookie是什么意思

爬虫cookie是什么意思

“爬虫 cookie”指的是网络爬虫在访问网站时所使用的cookie&#xff0c;网络爬虫是一种自动化程序&#xff0c;用于在互联网上收集信息并进行索引&#xff0c;这些信息可以用于搜索引擎、数据分析或其他目的。 本教程操作系统&#xff1a;Windows10系统、Dell G3电脑。 “爬虫…
阅读更多...
51-1 内网信息收集 - 内网资源探测

51-1 内网信息收集 - 内网资源探测

导语 在内网渗透过程中，通常需要利用各种技术来探测内网资源，为后续的横向渗透做准备。发现内网存活的主机及其详细信息可以帮助确定攻击方向和潜在的漏洞。 一、基于 ICMP 发现存活主机 ICMP（Internet Control Message Protocol，因特网控制消息协议）是 TCP/IP 协议簇的…
阅读更多...
一段式、二段式和三段式状态机的特点及适用情况:

一段式、二段式和三段式状态机的特点及适用情况:

在FPGA设计中,状态机的选择主要取决于具体应用场景和设计需求。 一段式状态机: 优点: 结构简单,易于理解和实现占用资源少时序逻辑简单,延迟小 缺点: 组合逻辑复杂度高可能存在毛刺问题不易于大规模状态机的设计 适用场景: 简单的控制逻辑状态数量较少的场合对时序要求较…
阅读更多...
React+TS前台项目实战（二十二）-- 全局常用导出组件Export封装

React+TS前台项目实战（二十二）-- 全局常用导出组件Export封装

文章目录 前言Export组件1. 功能分析2. 代码详细注释3. 使用方式4. 效果展示 总结 前言 今天我们来封装一个带导出图标的导出组件。 Export组件 1. 功能分析 通过传入链接地址&#xff0c;规定要跳转的导出页面&#xff0c;或是直接通过链接导出数据 2. 代码详细注释 // /c…
阅读更多...
虚拟环境管理

虚拟环境管理

虚拟环境 在使用 Python 时我们一般使用“pip install 第三方包名”来安装第三方包&#xff0c;但是由于pip的特性&#xff0c;系统只能安装每个包的一个版本。而在实际开发中&#xff0c;可能同时开发多个项目&#xff0c;如&#xff1a;上图有三个项目&#xff1b;每个项目需…
阅读更多...
django学习入门系列之第三点《BootSrap初了解》

django学习入门系列之第三点《BootSrap初了解》

文章目录 初识BootStrap往期回顾 初识BootStrap BootSrap是什么&#xff1f; 是别人帮我们已写好的CSS样式&#xff0c;我们如果想要使用这个BootSrap&#xff1a; 下载BootStrap使用 在页面上引入BootStrap编写HTML时&#xff0c;按照BootStrap的规定来编写 自定制 官网&…
阅读更多...
【UE5.1】Chaos物理系统基础——02 场系统的应用

【UE5.1】Chaos物理系统基础——02 场系统的应用

目录 步骤 一、运用临时场&#xff08;外部张力&#xff09;破裂几何体集 二、使用构造场固定几何体集 步骤 在上一篇中&#xff08;【UE5.1】Chaos物理系统基础——01 创建可被破坏的物体&#xff09;我们已经创建了可被破碎的几何体集&#xff0c;在最后我们防止几何体集…
阅读更多...
微信小程序简历Demo

微信小程序简历Demo

微信小程序简历Demo 使用介绍最后获取源码 bilibili视频介绍 使用介绍 使用微信小程序实现的一个简历实现Demo 拖动马里奥&#xff0c;到指定Name下方 向上顶就可以显示对应的简历样式 点击头像可拨打电话 点击信息处可显示当前位置 最后 这是一个简单并且有趣的微信小程…
阅读更多...
Renesas MCU使用SCI_I2C驱动OLED

Renesas MCU使用SCI_I2C驱动OLED

目录 概述 1 软硬件 1.1 软件版本信息 1.2 OLED屏幕 1.2.1 OLED简介 1.2.2 SSD1306介绍 1.2.3 0.9寸OLED模块介绍 2 FSP配置项目 2.1 配置项目参数 2.2 生成项目文件架构 3 代码实现 3.1 I2C的库函数 3.1.1 R_SCI_I2C_Open() 3.1.2 R_SCI_I2C_Read() 3.1.3 R_SCI_…
阅读更多...
谷粒商城篇章10 -- P262-P291/P295-P310 -- 订单服务（支付）【分布式高级篇七】

谷粒商城篇章10 -- P262-P291/P295-P310 -- 订单服务（支付）【分布式高级篇七】

目录 1 页面环境搭建 1.1 静态资源上传到nginx 1.2 SwitchHosts增加配置 1.3 网关配置 1.4 订单模块基础配置 1.4.1 引入 thymeleaf 依赖 1.4.2 application.yml配置 1.4.3 bootstrap.properties配置 1.4.4 开启nacos注册发现和远程调用 1.5 修改各个页面的静态资源路…
阅读更多...
windows电脑开发ios的p12证书申请流程

windows电脑开发ios的p12证书申请流程

很多同学在做ios打包的时候&#xff0c;发现ios打包需要一个p12格式的证书和一个证书profile文件&#xff0c;那么ios开发就一定需要使用mac电脑来申请ios证书吗&#xff1f;其实申请ios证书并不一定需要mac电脑&#xff0c;因为证书是一个通用的技术&#xff0c;使用普通的ssl…
阅读更多...
Perl 语言开发（二）：变量与数据类型

Perl 语言开发（二）：变量与数据类型

目录 1. 变量的基本概念 1.1 标量变量 1.2 数组变量 1.3 哈希变量 2. 数据类型详解 2.1 标量数据类型 2.1.1 数字 2.1.2 字符串 2.2 数组数据类型 2.2.1 数组操作 2.3 哈希数据类型 2.3.1 哈希操作 3. 变量的作用域与生存期 3.1 全局变量 3.2 局部变量 3.3 词法…
阅读更多...
最新文章

Copyright @ 2022~2023