【webpack开发环境下的配置】

webpack的五大核心

  • entry入口
  • output输出
  • loader: 处理非js文件(相当于翻译webpack本身只能理解js)
  • Plugins: 用于其他功能(压缩,优化等)
  • mode: 模式 主要有开发模式和生产环境

实践

  1. 下载包

npm i webpack webpack-cli -D

  1. 全局安装,否则找不到webpack命令

sudo npm i webpack webpack-cli -g

webpack.config.js文件框架

// webpack.config.js文件
/*** 作用:当运行webpack指令时,会加载里面的配置* 所有的构建工具都是基于nodejs平台运行的,模块化默认采用commonjs*/
// 用来拼接绝对路径
const { resolve } = require('path')
module.exports = {entry: './src/index.js',output: {filename: 'build.js',// __dirname:代表当前文件目录的绝对路径path: resolve(__dirname,'build')},// loader配置module: {// 详细的loader配置rules: []},plugins: [// 详细的插件配置],// 模式mode: 'development'
}

html文件处理

  1. 下载包

npm i html-webpack-plugin -D

  1. 配置
const HtmlWebpackPlugin = require('html-webpack-plugin');plugins: [// 详细的插件配置// 不加参数,默认创建一个空的html,自动引入打包输出的所有资源new HtmlWebpackPlugin({template: './src/index.html', // 以该./src/index.html文件为模版创建一个html,并自动引入打包输出的所有资源})  ],

样式处理

css文件

  1. 下载包

npm i css-loader style-loader -D

  1. 写webpack配置
//webpack5
module: {// 详细的loader配置rules: [{test: /\.css$/,  //匹配那些文件,这里注意下webpack的版本,4版本需要加’‘,'/\.css$/'use:[ //使用那些loader处理//  use数组中loader执行顺序:从下往上执行'style-loader', // 创建style标签,将js中的样式资源插入,添加到head中生效'css-loader', // 将css文件变成commonjs模块加入js中,里面的内容是样式字符串]}]
},

less文件

  1. 下载包

npm i css-loader style-loader less less-loader -D

  1. 写webpack配置
//webpack5
module: {// 详细的loader配置rules: [{test: /\.css$/,  //匹配那些文件,这里注意下webpack的版本,4版本需要加’‘,'/\.css$/'use:[ //使用那些loader处理//  use数组中loader执行顺序:从下往上执行'style-loader', // 创建style标签,将js中的样式资源插入,添加到head中生效'css-loader', // 将css文件变成commonjs模块加入js中,里面的内容是样式字符串]},{test: /\.less$/,//匹配那些文件,这里注意下webpack的版本,4版本需要加’‘,'/\.css$/'use: ['style-loader',// 创建style标签,将js中的样式资源插入,添加到head中生效'css-loader', // 将css文件变成commonjs模块加入js中,里面的内容是样式字符串'less-loader', // 将less文件编译成css文件]}]
},

图片处理

  1. 下载包

npm i url-loader file-loader -D // webpack5不需要

  1. webpack中的配置
{ test: /\.(jpg|png|gif|jpeg)$/, //处理图片//  webpack5写法type: 'asset',parser: {dataUrlCondition: {maxSize: 8 * 1024 // 图片小于8kb,就会被base64处理,base64图片优点:减少请求数量(减轻服务器压力) 缺点:图片体积更大(文件请求速度慢),这个根据实际情况设置,一般是处理(12kb以下)}},generator: {filename: 'static/[hash:10][ext][query]', // 重命名图片的名字[hash:10] 保留hash值的前10位,[ext] 保留图片原扩展名[query]添加之前的query参数},// webpack4 写法//  loader:'url-loader',  // 只使用一个loader可以用这种写法,多个loader用use数组//  options: {//   limit: 8 * 1024,  //    esModule: fasle,  // url-loader默认使用es6模块解析,而html-loader引入图片是commonjs,导致图片解析出错,所以得关闭url-loader的es6模块化// },
}

html中图片img

  1. 下载包

npm i html-loader -D

  1. webpack中的配置
{test: /\.html$/,loader: 'html-loader', // 处理html文件的img(负责引入img,从而被处理)
}

其他资源处理

其他资源: 指不需要处理的资源如字体图标

{// 打包其他资源exclude: /\.(css|js|html|png|jpg|less|json)/, //对应排除的文件根据需求修改type: 'asset/resource',generator: {filename: 'static/[hash:10][ext][query]', // 重命名图片的名字[hash:10] 保留hash值的前10位,[ext] 保留图片原扩展名[query]添加之前的query参数}}

devServer

  1. 作用

// 开发服务器, devServer: 自动化(自动编译,自动打开浏览器,自动刷新浏览器~~)
// 特点:只会在内存中编译打包,不会有任何输出
// 启动devServer指令为:npx webpack-dev-server

  1. 下载包

npm i -D webpack-dev-server webpack-cli webpack

  1. 配置
devServer: { // 这里检测的是源文件中的index.htmlstatic: './src/index.html', // 注意这里不能检测打包后的index.html文件,因为webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中,所以打包后的index.html文件是没有任何变化的,所以检测他浏览器不能自动刷新compress: true,port: 3000,open: true
},
  1. 运行项目

npx webpack-dev-server | webpack serve

以上两个命令都可以,任选一个就行

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

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

相关文章

华为以客户为中心的战略

2005年,伴随着国际化步伐的加快,华为重新梳理了自己的愿景、使命和发展战略,提出了以客户为中心的战略定位: 为客户服务是华为存在的唯一理由;客户需求是华为发展的原动力。质量好、服务好、运作成本低,优…

mac安装win10到外接固态硬盘

1、制作win10系统 1.1 下载 winToUSB,打开后选择第一个 1.2 选择本地下载镜像, 我用的分区方案是适用于UEFI的GPT模式 1.3 点右下角执行,等待执行完成即可 2、mac系统下载win驱动 2.1 comman空格 搜索启动转换助理,打开后选择…

前端框架入门之Vue _el和data的两种写法 分析MVVM模型

目录 _el与data的两种写法 MVVM模型 _el与data的两种写法 查看vue的实例对象 我们在这边注释掉了el属性 这样的话div容器就绑定不了vue实例 当我们可以在这里写一个定时任务 然后再回头指定 这个mount有挂载的意思 就是把容器对象交给vue实例后 去给他挂载指定的对象 &…

Web前端-Web开发HTML基础2-list

一. 基础 1. 写一个列表标签,生成一个有三条记录的无序列表; 2. 写一个列表标签,生成一个有四条记录的无序列表; 3. 写一个列表标签,生成一个有五条记录的无序列表; 4. 写一个列表标签,生成一个…

深入解析HTTPS与HTTP

在当今数字化时代,网络安全已成为社会各界关注的焦点。随着互联网技术的飞速发展,个人和企业的数据安全问题日益凸显。在此背景下,HTTPS作为一种更加安全的通信协议,逐渐取代了传统的HTTP协议,成为保护网络安全的重要屏…

【概率论三】参数估计

文章目录 一. 点估计1. 矩估计法2. 极大似然法1. 似然函数2. 极大似然估计 3. 评价估计量的标准2.1. 无偏性2.2. 有效性2.3. 一致性 三. 区间估计1. 区间估计的概念2. 正态总体参数的区间估计 参数估计讲什么 由样本来确定未知参数参数估计分为点估计与区间估计 一. 点估计 所…

十四、(正点原子)Linux MISC驱动

misc 的意思是混合、杂项的,因此 MISC 驱动也叫做杂项驱动,也就是当我们板子上的某些外设无法进行分类的时候就可以使用 MISC 驱动。 MISC 驱动其实就是最简单的字符设备驱动,通常嵌套在 platform 总线驱动中,实现复杂的驱动。 一…

IDEA启动Web项目总是提示端口占用

文章目录 IDEA启动Web项目总是提示端口占用一、前言1.场景2.环境 二、正文1.场景一:真端口占用2. 场景二:假端口占用 IDEA启动Web项目总是提示端口占用 一、前言 1.场景 IDEA启动Web项目总是提示端口占用: 确实是端口被占用,比如:没有正常…

clion中建立c文件工程,读取或创建sqlite3数据库文件

1.首先前往SQLite官网下载sqlite3所需文件 SQLite Download Page 2.解压文件,将其中的sqlite3.c和sqlite3.h拷贝到你对应的文件工程中 3.修改CMakeLists.txt文件,添加编译选项及连接文件 4.运行代码及查询数据库文件

【NLP自然语言处理】基于BERT实现文本情感分类

Bert概述 BERT(Bidirectional Encoder Representations from Transformers)是一种深度学习模型,用于自然语言处理(NLP)任务。BERT的核心是由一种强大的神经网络架构——Transformer驱动的。这种架构包含了一种称为自注…

【Mamba】Mamba的部署

ubuntu系统安装11.6版本的cuda 可以参考这两篇博客 ubuntu22.04多版本安装cuda及快速切换(cuda11.1和11.8)_ubuntu调整cuda版本 【Linux】在一台机器上同时安装多个版本的CUDA(切换CUDA版本)_linux安装多个cuda 安装CUDA https…

js原生ajax请求

以下是使用 JavaScript 原生的 XMLHttpRequest 对象进行 ajax 请求的示例代码: function ajaxRequest(method, url, data, callback) {var xhr new XMLHttpRequest();xhr.open(method, url, true);if (method POST) {xhr.setRequestHeader(Content-Type, applica…

安全与认证:在Symfony中实现用户登录和权限管理

安全与认证:在Symfony中实现用户登录和权限管理 目录 简介Symfony 安全组件概述用户登录实现 配置安全系统创建用户实体配置用户提供者创建登录表单 权限管理实现 角色与权限配置控制器中的权限检查安全注解的使用 示例项目 项目结构示例代码 总结 1. 简介 在现…

【React打卡学习第一天】

React入门 一、简介二、基本使用1.引入相关js库2.babel.js的作用 二、创建虚拟DOM三、JSX(JavaScript XML)1.本质2.作用3.基本语法规则定义虚拟DOM时,不要写引号。标签中混入JS表达式时要用{}。样式的类名指定不要用class,要用className.内联…

掌握未来:深度解析Xcode Cloud服务的高效使用

掌握未来:深度解析Xcode Cloud服务的高效使用 随着软件开发的不断进步,开发者们越来越需要一个能够提升效率、降低成本的工具。苹果公司推出的Xcode Cloud服务正是为了满足这一需求。本文将详细解析如何使用Xcode Cloud服务,并通过实际代码示…

大语言模型系列:Transformer

在自然语言处理(NLP)领域,Transformer模型自2017年由Vaswani等人在论文《Attention Is All You Need》中提出以来,已成为最具影响力的技术之一。这种模型设计的核心是自注意力机制,它允许模型在处理序列数据时&#xf…

solidity基础语法(以太坊solidity合约)

solidity基础语法(以太坊solidity合约) 1-值类型和取值范围2-引用类型3-引用类型高阶4-固定数组和动态数组 1-值类型和取值范围 https://learnblockchain.cn/docs/solidity/introduction-to-smart-contracts.html#subcurrency https://learnblockchain…

Nest.js 实战 (二):如何使用 Prisma 和连接 PostgreSQL 数据库

什么是 Prisma? Prisma 是一个开源的下一代 ORM。它包含了以下部分: Prisma Client: 自动生成、类型安全的查询构建器,用于 Node.js 和 TypeScriptPrisma Migrate: 数据迁移系统Prisma Studio: 查询和编辑数据库中数据的图形化界面 Prisma 客户端可以…

JAVA23种设计模式简介

设计模式 设计模式的类型 创建型模式 隐藏了创建对象的过程,通过逻辑方法进行创建对象,而不是通过new关键字创建对象。 工厂方法模式 定义接口或一个抽象的工厂类,让它实现类(工厂)来决定创建哪一个实例对象。根据每…

Unity3D中ProtoBuf的编译与使用详解

引言 Unity3D作为当今最流行的游戏开发引擎之一,支持多种编程语言,特别是C#,并提供了丰富的工具集来创建高质量的2D和3D游戏。在游戏开发中,数据的序列化和反序列化是至关重要的一环,它们影响着游戏的性能、网络通信的…