Web工程化

news2025/1/14 0:55:39
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 --version

1、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 = 8kb
                            limit: 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(),
        // 提取css
        new 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.coloradmin.cn/o/1882103.html

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

相关文章

鸿蒙应用更新跳转到应用市场

鸿蒙应用更新跳转到应用市场

鸿蒙没有应用下载安装&#xff0c;只支持跳转到应用市场更新 gotoMarket(){try {const request: Want {parameters: {// 此处填入要加载的应用包名&#xff0c;例如&#xff1a; bundleName: "com.huawei.hmsapp.appgallery"bundleName: com.huawei.hmos.maps.app}}…
阅读更多...
SSM“点点通”餐饮点餐小程序-计算机毕业设计源码11264

SSM“点点通”餐饮点餐小程序-计算机毕业设计源码11264

摘要 随着中国经济的飞速增长&#xff0c;消费者的智能化水平不断提高&#xff0c;许多智能手机和相关的软件正在得到更多的关注和支持。其中&#xff0c;微信的餐饮点餐小程序更是深得消费者的喜爱&#xff0c;它的出现极大地改善了消费者的生活质量&#xff0c;同时&#xf…
阅读更多...
大数据开发中如何计算用户留存及SQL示例

大数据开发中如何计算用户留存及SQL示例

在大数据开发领域&#xff0c;用户留存是一个关键指标&#xff0c;它反映了产品吸引并保留用户的能力。 留存率的计算不仅有助于评估产品的健康状况&#xff0c;还能为产品优化和市场策略提供重要依据。 本文将详细介绍如何在大数据开发中计算用户留存&#xff0c;并附带具体…
阅读更多...
docker k8s

docker k8s

1、docker是什么&#xff1f; 将环境和程序一起打包给到 服务器运行的工具软件。 2、基础镜像base image是什么&#xff1f; 操作系统&#xff1a;用户空间、内核空间 阉割操作系统&#xff0c;利用其的用户空间&#xff08;因为应用程序运行在用户空间&#xff09;&#xf…
阅读更多...
永磁同步电机离线参数识别

永磁同步电机离线参数识别

引言 永磁同步电机&#xff08;PMSM&#xff09;因其结构简单、功率密度高、转矩惯量比大和效率高等优点&#xff0c;在工业生产、航空航天和新能源交通等领域得到了广泛应用。然而&#xff0c;传统的参数辨识方法依赖位置传感器&#xff0c;这不仅增加了硬件成本&#xff0c;…
阅读更多...
薄冰英语语法学习--名词3-性别

薄冰英语语法学习--名词3-性别

上面的是人。 下面的是动物。 花个2分钟看一下人的&#xff0c;在花2分钟看一下动物的。记不住没关系&#xff0c;读一遍。像 我这样 男人 man &#xff0c;女人 woman 。xxx xxx ,xxx ,xxx 读完发现很多带ness代表雌性的。 核心 英语中的雌雄可以用&#xff0c;man 和 wo…
阅读更多...
C++ ：lambda表达式

C++ ：lambda表达式

目录 lambda表达式书写格式&#xff1a; lambda表达式各部分说明&#xff1a; lambda的使用示范&#xff1a; 注意事项&#xff1a; 返回值类型可以省略&#xff0c;参数也可也省略&#xff1a; sort内部也可以直接写lambda表达式&#xff1a; 排序时利用lambda进行排序…
阅读更多...
【正点原子K210连载】第十六章 machine模块实验 摘自【正点原子】DNK210使用指南-CanMV版指南

【正点原子K210连载】第十六章 machine模块实验 摘自【正点原子】DNK210使用指南-CanMV版指南

1&#xff09;实验平台&#xff1a;正点原子ATK-DNK210开发板 2&#xff09;平台购买地址https://detail.tmall.com/item.htm?id731866264428 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/docs/boards/xiaoxitongban 第十六章 machine模块…
阅读更多...
小区服务前台小程序的设计

小区服务前台小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;住户管理&#xff0c;管理员管理&#xff0c;员工管理&#xff0c;安保管理&#xff0c;安保分配管理&#xff0c;客服聊天管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;公告&#xff0c;…
阅读更多...
AI绘画Stable Diffusion 高清放大，多种方法详解，建议收藏！

AI绘画Stable Diffusion 高清放大，多种方法详解，建议收藏！

&#x1f463; 本章概述 在Stable Diffusion我们想要得到一张高分辨率且具有细节特征的图片时&#xff0c;我们就需要使用一些图片放大算法来帮助我们实现。 本文主要概述在sd中常常使用的高清修复方法以及不同方法的区别和应用场景。同时也给出一些推荐的工作流&#xff0c;你…
阅读更多...
python实现符文加、解密

python实现符文加、解密

在历史悠久的加密技术中&#xff0c;恺撒密码以其简单却有效的原理闻名。通过固定的字母位移&#xff0c;明文可以被转换成密文&#xff0c;而解密则是逆向操作。这种技术不仅适用于英文字母&#xff0c;还可以扩展到其他语言的字符体系&#xff0c;如日语的平假名或汉语的拼音…
阅读更多...
jvm性能监控常用工具

jvm性能监控常用工具

在java的/bin目录下有许多java自带的工具。 我们常用的有 基础工具 jar:创建和管理jar文件 java&#xff1a;java运行工具&#xff0c;用于运行class文件或jar文件 javac&#xff1a;java的编译器 javadoc&#xff1a;java的API文档生成工具 性能监控和故障处理 jps jstat…
阅读更多...
Pickle, SafeTensor, GGML和GGUF

Pickle, SafeTensor, GGML和GGUF

如今&#xff0c;大型语言模型的使用方式有以下几种&#xff1a; 作为 OpenAI、Anthropic 或主要云提供商托管的专有模型的 API 端点作为从 HuggingFace 的模型中心下载的模型工件和/或使用 HuggingFace 库进行训练/微调并托管在本地存储中作为针对本地推理优化的格式的模型工…
阅读更多...
springboot学习，如何用redission实现分布式锁

springboot学习，如何用redission实现分布式锁

目录 一、springboot框架介绍二、redission是什么三、什么是分布式锁四、如何用redission实现分布式锁 一、springboot框架介绍 Spring Boot是一个开源的Java框架&#xff0c;由Pivotal团队&#xff08;现为VMware的一部分&#xff09;于2013年推出。它旨在简化Spring应用程序…
阅读更多...
Verilog中的wire和reg有什么区别

Verilog中的wire和reg有什么区别

大多数初学者还没有真正很难掌握Verilog/SystemVerilog硬件描述语言&#xff08;HDL&#xff09;中wire&#xff08;网络&#xff09;和reg&#xff08;变量&#xff09;的区别。这个概念是每个经验丰富的RTL设计都应该熟悉的。但是现在有许多没有Verilog开发经验的验证工程师都…
阅读更多...
mybatis延迟加载

mybatis延迟加载

mybatis延迟加载 1、延迟加载概述 应用场景 ​ 如果查询订单并且关联查询用户信息。如果先查询订单信息即可满足要求&#xff0c;当我们需要查询用户信息时再查询用户信息。把对用户信息的按需去查询就是延迟加载。 延迟加载的好处 ​ 先从单表查询、需要时再从关联表去关联查…
阅读更多...
最短路模型——AcWing 188. 武士风度的牛

最短路模型——AcWing 188. 武士风度的牛

最短路模型 定义 最短路模型是图论中的一个经典问题&#xff0c;旨在寻找从图中一个顶点到另一个顶点的路径&#xff0c;使得这条路径上的边&#xff08;或边的权重&#xff09;之和最小。这一模型在许多实际问题中有着广泛的应用&#xff0c;比如网络路由、地图导航、物流配…
阅读更多...
音频转文字怎么转？4个音频转文字的方法一定要知道

音频转文字怎么转？4个音频转文字的方法一定要知道

随着夏日脚步的到来&#xff0c;各类活动和准备工作也随之增多。 在这样一个忙碌的时期&#xff0c;整理会议的音频记录变得尤为关键。然而&#xff0c;单单依靠手动整理&#xff0c;不仅耗时耗力&#xff0c;还可能出现错漏。 但也不用太着急&#xff0c;下面将为大家介绍几…
阅读更多...
生产者发送数据，kafka服务器接收数据异常的问题记录

生产者发送数据，kafka服务器接收数据异常的问题记录

现象&#xff1a; 某个客户要求审计日志用kafka的方式传输给他们&#xff0c;使用了第三方的librdkafka库来开发。 往客户提供的kafka服务器上的一个topic发送数据&#xff0c;这个topic有三个分区&#xff0c;客户反馈接收到的数据和发送端发送的实际数量对不上&#xff0c;他…
阅读更多...
韩顺平0基础学java——第34天

韩顺平0基础学java——第34天

p675-689 UDP网络编程 1.类 DatagramSocket和 DatagramPacket[数据包/数据报]实现了基于UDP协议网络程序。 2.UDP数据报通过数据报套接字DatagramSocket发送和接收&#xff0c;系统不保证UDP数据报一定能够安全送到目的地,也不能确定什么时候可以抵达。 3.DatagramPacket对象…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023