webpack插件安装

webpack插件安装

    • 1、html-webpack-plugin插件
    • 2 、css-loader和style-loader插件
    • 3、less-load插件

1、html-webpack-plugin插件

1、下载插件

yarn add html-webpack-plugin -D

2、webpack.config.js添加配置

*const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');module.exports = {entry: 'index.js',output: {path: path.resolve(__dirname, './dist'),filename: 'index_bundle.js',},plugins: [new HtmlWebpackPlugin()],
};

webpack 默认只能打包js文件 css文件需要下载插件打包
在这里插入图片描述

2 、css-loader和style-loader插件

1、下载插件

yarn add css-loader style-loader -D

2、webpack.config.js配置

module.exports = {module: {rules: [{test: /\.css$/i,use: ["style-loader", "css-loader"],},],},
};

3、less-load插件

1、下载插件

yarn add less-load -D

2、webpack.config.js配置

const HtmlWebpackPlugin = require('html-webpack-plugin');const path = require('path')module.exports = {entry:'./src/main.js', //入口output:{path:path.resolve(__dirname,'dist'),// 出口路径文件夹的名字filename:'bundle.js' //出口文件的名字 代码打包进这里},plugins: [new HtmlWebpackPlugin({ //pluginstemplate:'./public/index.html'})],module:{rules: [{test: /\.css$/i,use: ["style-loader", "css-loader"],},{test: /\.less$/i,use: [// compiles Less to CSS'style-loader','css-loader','less-loader',],}],}}

参考文献:https://www.webpackjs.com/loaders/less-loader/#root

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

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

相关文章

SpringBoot+JWT实现单点登录解决方案

一、什么是单点登录? 单点登录是一种统一认证和授权机制,指在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的系统,不需要重新登录验证。 单点登录一般用于互相授信的系统,实现单一位置登录,其他信任的…

机器学习技术(五)——特征工程与模型评估

机器学习技术(五)——特征工程与模型评估(2️⃣) 文章目录 机器学习技术(五)——特征工程与模型评估(:two:)二、模型评估1、Accuracy score2、Confusion matrix混淆矩阵1、多值2、二值 3、Hamming loss4、Precision, recall and F…

深度学习笔记之Transformer(八)Transformer模型架构基本介绍

机器学习笔记之Transformer——Transformer模型架构基本介绍 引言回顾:简单理解: Seq2seq \text{Seq2seq} Seq2seq模型架构与自编码器自注意力机制 Transformer \text{Transformer} Transformer架构关于架构的简单认识多头注意力机制包含掩码的多头注意力…

Elasticsearch【全文检索、倒排索引、应用场景、对比Solr、数据结构】(一)-全面详解(学习总结---从入门到深化)

目录 Elasticsearch介绍_全文检索 Elasticsearch介绍_倒排索引 Elasticsearch介绍_Elasticsearch的出现 Elasticsearch介绍_Elasticsearch应用场景 Elasticsearch介绍_Elasticsearch对比Solr Elasticsearch介绍_Elasticsearch数据结构 Elasticsearch介绍_全文检索 Elasti…

libvirt 热迁移流程及参数介绍

01 热迁移基本原理 1.1 热迁移概念 热迁移也叫在线迁移,是指虚拟机在开机状态下,且不影响虚拟机内部业务正常运行的情况下,从一台宿主机迁移到另外一台宿主机上的过程。 1.2 虚拟机数据传输预拷贝和后拷贝 预拷贝(pre-copy): …

Windows如何恢复已删除的Word文档?

案例:可以恢复已删除的Word文档吗? “大家好,我遇到了一个问题,需要大家的帮助。昨天我编辑了一个Word文档并保存到了桌面上,但当我今天再次打开电脑时,它就不见了!昨天工作完成后&#xff…

Sentinel 规则详解

Sentinel 规则 流控规则 flow1、QPS流控2、并发线程数流控3、流控模式4、流控效果 熔断(降级)规则 degrade1、慢调用比例2、异常比例3、异常数 热点规则 param-flow授权规则 authority1、应用场景2、自定义来源3、授权规则配置 系统规则 前言&#xff1a…

JMeter进行WebSocket压力测试

背景 之前两篇内容介绍了一下 WebSocket 和 SocketIO 的基础内容。之后用 Netty-SocketIO 开发了一个简单的服务端,支持服务端主动向客户端发送消息,同时也支持客户端请求,服务端响应方式。本文主要想了解一下服务端的性能怎么样,…

4.6.tensorRT基础(1)-实际模型上onnx文件的各种操作

目录 前言1. onnx1.1 读取节点1.2 修改节点1.3 替换节点1.4 删除节点1.5 修改input和output1.6 预处理的接入 总结 前言 杜老师推出的 tensorRT从零起步高性能部署 课程,之前有看过一遍,但是没有做笔记,很多东西也忘了。这次重新撸一遍&#…

【深度学习】神经网络初学者指南

一、说明 这是一篇对神经网络的泛泛而谈的文章,我的意见是,先知道框架,而后知道每一个细节,这是学习人工智能的基本路线。本文就神经网络而言,谈到一些基础概念,适应于初学者建立概念。 二、神经网络定义 神…

计算机网络————网络层

文章目录 网络层设计思路IP地址IP地址分类IP地址与硬件地址 协议ARP和RARPIP划分子网和构造超网划分子网构造超网(无分类编址CIDR) ICMP 虚拟专用网VPN和网络地址转换NATVPNNAT 网络层设计思路 网络层向上只提供简单灵活的、无连接的、尽最大努力交付的数…

【MQTT】Esp32数据上传采集:最新mqtt插件(支持掉线、真机调试错误等问题)

前言 这是我在Dcloud发布的插件-最完整Mqtt示例代码(解决掉线、真机调试错误等问题),经过整改优化和替换Mqtt的js文件使一些市场上出现的问题得以解决,至于跨端出问题,可能原因有很多,例如,合法…

<数据结构>并查集

目录 并查集概念 合并 查找集合的数量 并查集类代码实现 并查集概念 并查集和堆一样,都是通过数组来实现树的节点映射,不过并查集作用是,把一堆数据分为不同的几个小集合 不过并查集是森林的概念,并查集的学习可以帮助我们去更…

IDEA中侧边栏没有git commit模块,如何恢复?

一、修改之前 侧边栏没有git commit模块 二、修改之后 侧边栏恢复了git commit模块 三、下面是恢复教程 1.中文版 打开 文件 -> 设置 -> 版本控制 -> 提交 -> 勾选 【使用非模式提交界面】 -> 点击【确定】 2.英文版 打开 file -> Settings -> Version Co…

同步和异步的区别

同步,可以理解为在执行完一个函数或方法之后,一直等待系统返回值或消息,这时程序是处于阻塞的,只有接收到返回的值或消息后才往下执行其他的命令; 异步,执行完函数或方法后,不必阻塞性地等待返回…

Linux与Windows:操作系统的比较与技巧分享

🌷🍁 博主 libin9iOak带您 Go to New World.✨🍁 🦄 个人主页——libin9iOak的博客🎐 🐳 《面试题大全》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~&#x1f33…

【数学建模】国赛真题分析 2012 A题 葡萄酒的评价

2012 A题 葡萄酒的评价 优秀论文地址: 链接:https://pan.baidu.com/s/19WGpybgM6RncxTYhx61JRA?pwdvl22 提取码:vl22 –来自百度网盘超级会员V6的分享 确定葡萄酒质量时一般是通过聘请一批有资质的评酒员进行品评。每个评酒员在对葡萄酒进…

计讯物联网关型水利遥测终端机TY910确保闸站自动化监测长效运行

闸站是我国水利建设工程的重要组成部分,具备调度水源、防洪排涝、灌溉等能力,在农业、水路运输、养殖业等行业领域起着关键作用,进而解决区域水资源不均衡的问题,促进水资源多方面的利用。当前,我国闸站存在数量多、分…

线性代数 4 every one(线性代数学习资源分享)

Linear Algebra 4 Every One 版权说明,以下我分享的都是一个名叫Kenji Hiranabe的日本学者,在github上分享的,关于Gilbert Strang教授所撰写的《Linear Algebra for Everyone》一书的总结,更像是一个非常精美的线性代数手册&#…

.net core 2.1 简单部署IIS运行

netcore的项目不像netFramework那么方便部署到iis还是要费点功夫的 比如我想把这个netcore2.1的项目部署到iis并运行: 按照步骤走: 一、确认自己的netcore环境 1、需要安装下面3个环境包(如果电脑已安装请忽略) 检查是否安装cmd命令:cmd&…