webpack.prod.js(webpack生产环境配置文件)

生产环境:只打包不运行本地服务器


对于在config目录下的webpack.prod.js    

1.在根目录下运行

npx webpack --config ./config/webpack.prod.js

2.在package.json文件中配置

"build":"npx webpack --config ./config/webpack.prod.js"

const path =require('path')
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={//入口//输出//加载器//插件//模式entry:"./src/main.js",//相对路径output:{//文件的输出路径 __dirname:当前文件的文件夹目录path:path.resolve(__dirname,"../dist"),//绝对路径 path是所有文件的输出路径//入口文件打包输出的文件名filename:"static/js/main.js",clean: true,//每次打包前清理上一次打包的内容},module:{rules:[//loader的配置{test: /\.css$/, //只检测.css文件use: [//执行顺序从右到左,从下到上'style-loader', //将js中的css通过创建style标签添加到html文件中生效'css-loader'],//将css资源编译成common.js到webpack中},{test: /\.less$/i,//loader:"xxx" 只能使用一个loader use可以使用多个use: [// compiles Less to CSS'style-loader','css-loader','less-loader',],},{test: /\.s[ac]ss$/i,use: [// 将 JS 字符串生成为 style 节点'style-loader',// 将 CSS 转化成 CommonJS 模块'css-loader',// 将 Sass 编译成 CSS'sass-loader',],},{test: /\.styl$/,// loader: 'stylus-loader', // 将 Stylus 文件编译为 CSSuse: [// compiles Less to CSS'style-loader','css-loader','stylus-loader',],},{test: /\.(png|jpe?g|gif|webp|svg)$/,type: 'asset',parser: {dataUrlCondition: {//小于10kb的图片转base64 减少请求数量 但是体积会大一点maxSize: 10 * 1024 // 10kb}},generator: {filename: 'static/images/[hash:10][ext][query]'//图片命名有点长 [hash:10]只取十位}},{test: /\.(ttf|woff2?)$/,type: 'asset/resource',generator: {filename: 'static/fonts/[hash:10][ext][query]'}},{test: /\.(mp3|mp4|avi)$/,type: 'asset/resource',generator: {filename: 'static/media/[hash:10][ext][query]'}}, {test: /\.js$/,exclude: /(node_modules)/,//排除node_modules中的js文件use: {loader: 'babel-loader',// options: {//   presets: ['@babel/preset-env'],// },},}]},//插件需要引用才能使用plugins:[//插件的配置new ESLintPlugin({//检测哪些文件context: path.resolve(__dirname,'../src'),}),new HtmlWebpackPlugin({//模版 新的html文件结构与原来一致 会自动引入打包的资源template:path.resolve(__dirname,'../public/index.html')})],//模式mode:"production",
}

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

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

相关文章

正弦实时数据库(SinRTDB)的使用(11)-限制磁盘空间

前文已经将正弦实时数据库的使用进行了介绍,需要了解的可以先看下面的博客: 正弦实时数据库(SinRTDB)的安装 正弦实时数据库(SinRTDB)的使用(1)-使用数据发生器写入数据 正弦实时数据库(SinRTDB)的使用(2)-接入OPC DA的数据 正弦实时数据库(SinRTDB)…

通过pymysql读取数据库中表格并保存到excel(实用篇)

本篇文章是通过pymysql将本地数据库中的指定表格保存到excel的操作。 这里我们假设本地已经安装了对应的数据库管理工具,里面有一个指定的表格,现在通过python程序,通过调用pymysql进行读取并保存到excel中。 关于数据库管理工具是Navicat P…

【题解】—— LeetCode一周小结13

【题解】—— 每日一道题目栏 上接:【题解】—— LeetCode一周小结12 25.零钱兑换 II 题目链接:518. 零钱兑换 II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合…

NVIDIA Jetson Xavier NX入门-镜像为jetpack5(3)——pytorch和torchvision安装

NVIDIA Jetson Xavier NX入门-镜像为jetpack5(3)——pytorch和torchvision安装 镜像为jetpack5系列: NVIDIA Jetson Xavier NX入门-镜像为jetpack5(1)——镜像烧写 NVIDIA Jetson Xavier NX入门-镜像为jetpack5&#…

PI案例分享--2000A核心电源网络的设计、仿真与验证

目录 摘要 0 引言 1 为什么需要 2000A 的数字电子产品? 2 2000A 的供电电源设计 2.1 "MPM3698 2*MPM3699"的 MPS扩展电源架构 2.2 使用恒定导通时间(COT)模式输出核心电压的原因 2.3 模块化 VRM 的优势 2.4 用步进负载验证2000A的设计难点 2.4.1 电源网络 …

机器人---人形机器人之技术方向

1 背景介绍 在前面的文章《行业杂谈---人形机器人的未来》中,笔者初步介绍了人形机器人的未来发展趋势。同智能汽车一样,它也会是未来机器人领域的一个重要分支。目前地球上最高智慧的结晶体就是人类,那么人形机器人的未来会有非常大的发展空…

【深度学习】球衣号码识别 re-id追踪

1. CLIP-ReIdent: Contrastive Training for Player Re-Identification 论文解析–2023的论文,貌似顶会 论文方法是类不可知的,微调CLIP vitl/14模型,在MMSports 2022球员重新识别挑战中实现98.44%的mAP。此外,CLIP Vision Trans…

在 C#和ASP.NET Core中创建 gRPC 客户端和服务器

关于gRPC和Google protobuf gRPC 是一种可以跨语言运行的现代高性能远程过程调用 (RPC) 框架。gRPC 实际上已经成为 RPC 框架的行业标准,Google 内外的组织都在使用它来从微服务到计算的“最后一英里”(移动、网络和物联网)的强大用例。 gRP…

SQLite3进行数据库各项常用操作

目录 前言1、SQLite介绍2、通过SQLite创建一个数据库文件3、往数据库文件中插入数据4、数据库文件信息查询5、修改数据库中的内容6、删除数据库中的内容 前言 本文是通过轻量化数据库管理工具SQLite进行的基础操作和一些功能实现。 1、SQLite介绍 SQLite是一个广泛使用的嵌入…

[C++面向对象]很难蒙混过关的CArray3d三维数组模板类

07:很难蒙混过关的CArray3d三维数组模板类 描述 实现一个三维数组模版CArray3D&#xff0c;可以用来生成元素为任意类型变量的三维数组&#xff0c;输出指定结果 #include <iostream> #include <iomanip> #include <cstring> using namespace std; templ…

微信小程序如何进行npm导入组件

文章目录 目录 文章目录 前言 一、安装node 二、微信小程序通过npm安装组件&#xff08;以Vant-weapp为例&#xff09; 一、Vant-weapp下载 二 、修改 app.json 三 、修改 project.config.json 四 、 构建 npm 包 前言 微信小程序使用npm导入有很多的教程&#xff0c;我…

vue基础教程(5)——十分钟吃透vue路由router

同学们可以私信我加入学习群&#xff01; 正文开始 前言一、路由概念二、路由使用三、创建路由对应的组件四、给整个项目一个入口总结 前言 前面的文章运行成功后&#xff0c;页面显示如下&#xff1a; 在这个页面中&#xff0c;点击Home和About都会切换右面的页面内容&#…

一百以内累加(C语言)

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS #include <stdio.h>int main() {//初始化变量值&#xff1b;int a 2;int result 1;//循环运算&#xff1b;while (a < 100){//加&#xff1b;result a result;//改变变量值&a…

Spring(详细介绍)

目录 一、简介 1、什么是Spring&#xff1f; 2、Spring框架的核心特性 3、优点 二、IOC容器 介绍 1、获取资源的传统方式 2、控制反转方式获取资源 3、DI 4、IOC容器在Spring中的实现 入门案例 1、创建Maven Module 2、引入依赖 3、创建HelloWorld类 4、在Spring的配…

【动手学深度学习】深入浅出深度学习之利用神经网络识别螺旋状数据集

目录 &#x1f31e;一、实验目的 &#x1f31e;二、实验准备 &#x1f31e;三、实验内容 &#x1f33c;1. 生成螺旋状数据集 &#x1f33c;2. 打印数据集 &#x1f33c;3. 编程实现 &#x1f33b;仿射层-Affine类 &#x1f33b;传播层-Sigmoid类 &#x1f33b;损失函数…

Unity urp渲染管线下,动态修改材质球surfaceType

在项目中遇到了需要代码动态修改材质球的surfaceType&#xff0c;使其动态切换是否透明的需求。 urp渲染管线下&#xff0c;动态修改材质球的surfaceType&#xff0c;查了大部分帖子&#xff0c;都有一些瑕疵&#xff0c;可能会造成透明后阴影投射有问题。 其次在webgl平台上…

简单了解波 Mono-repo Multi-repo(Poly-repo)

Mono-repo 和 Multi-repo 是软件开发中代码管理的两个不同策略。Mono-repo & Multi-repo 孰优孰劣是个老生常谈得话题了&#xff0c;这里就不 PK 了&#xff0c;“略微”看下两者区别。 当我们使用 Git 作为版本控制系统管理项目的代码时&#xff0c;那么 monorepo 与 mul…

iptables 与 firewalld 防火墙

iptables iptables 是一款基于命令行的防火墙策略管理工具 四种防火墙策略&#xff1a; ACCEPT&#xff08;允许流量通过&#xff09; 流量发送方会看到响应超时的提醒&#xff0c;但是流量发送方无法判断流量是被拒绝&#xff0c;还是接收方主机当前不在线 REJECT&#xff08…

上位机图像处理和嵌入式模块部署(qmacvisual寻找圆和寻找直线)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面有几篇文章&#xff0c;我们谈到过直线拟合、圆拟合和椭圆拟合。当时&#xff0c;我们的做法是&#xff0c;先找到了轮廓&#xff0c;接着找到…

设计模式-概述篇

1. 掌握设计模式的层次 第1层&#xff1a;刚开始学编程不久&#xff0c;听说过什么是设计模式第2层&#xff1a;有很长时间的编程经验&#xff0c;自己写了很多代码&#xff0c;其中用到了设计模式&#xff0c;但是自己却不知道第3层&#xff1a;学习过了设计模式&#xff0c;…