Webpack 初始化

news/2024/12/23 18:46:26/文章来源:https://www.cnblogs.com/hotMemo/p/18449527

1、初始化npm项目 npm init -y 得到 package.json

2、安装 webpack,webpack-cli相关 npm install webpack webpack-cli --dev

node_modules .bin目录有webpack相关

 即可通过npm 运行 webpack命令

如: npm webpack --version

 可直接执行 webpack命令进行打包

也可这么着:

 webpack默认src/index.js 打包到 dist/main.js

若自定义的话,需在项目的根目录下,创建webpack.config.js文件里面的代码需按common.js的格式来编写代码,因为它是被node环境执行。

 指定打包模式: 

 production development none

webpack 资源模块加载

npm install css-loader --dev

 webpack.config.js 中添加 rules

 npm install style-loader --dev

 use数组里是从后往前执行的,所以需要先要css-loader 编译,再用style-loader 引用。

npm install file-loader --dev

publicPath: 配置网站的根目录

npm install url-loader --dev

npm install babel-loader @babel/core @babel/preset-env --dev

HTML loader
npm install html-loader --dev

 配置触发 webpack loader的属性。

自动清理输出目录:

npm install clean-webpack-plugin --dev

 

通过webpack输出HTML文件
npm install html-webpack-plugin --dev

 

 lodash语法:


自动编译:
watch模式


npm install webpack-dev-server --dev

 

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

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

相关文章

iPhone开机一直白苹果闪烁,3个解决卡在开机画面的方法!

很多苹果用户在网上反馈,某天iPhone开机一直卡在开机Apple标志画面,而且白苹果一直闪烁。长按电源键也无法正常启动设备,黑屏后还是会出现苹果logo,一直闪烁。遇到iPhone开机一直白苹果闪烁的情况,多半是因为iOS系统故障。更专业的说,是系统组件调用执行失败而导致无法出…

因果推断与间接效应

img { display: block; margin-left: auto; margin-right: auto } table { margin-left: auto; margin-right: auto } 因果推断(Causal Inference)是统计学和数据科学中的重要分支,用于理解事件之间的因果关系,而不仅仅是相关性。与相关性分析不同,因果推断追求揭示因变量…

#HACKTHEBOX——Driver

靶机详情靶机地址:10.10.11.106 kali地址:10.10.16.4 初始侦察与渗透确认kali与靶机之间可以ping通使用nmap进行侦查扫描 nmap -sT --min-rate 1000 -p- 10.10.11.106 #以TCP协议,基于当前网络情况,以最低1000的速率进行该IP的全部端口nmap -sT -sC -sV -p 80,135,445,5985…

HACKTHEBOX——Crafty

靶机详情靶机地址:10.10.11.249 kali地址:10.10.16.3 端口服务扫描确认kali与靶机可以ping通使用nmap进行扫描 nmap -sT --min-rate 1000 -p- 10.10.11.249 #以TCP协议,基于当前网络情况,以最低1000的速率进行该IP的全部端口nmap -sT -sC -sV -p 80,25565 10.10.11.249 #详…

字符编码发展史5 — UTF-16和UTF-32

上一篇《字符编码发展史4 — Unicode与UTF-8》我们讲解了Unicode字符集与UTF-8编码。本篇我们将继续讲解字符编码的第三个发展阶段中的UTF-16和UTF-32。 2.3. 第三个阶段 国际化 2.3.2. Unicode的编码方式 2.3.2.2. UTF-16 UTF-16也是一种变长编码,对于一个Unicode字符被编码成…

24.10.07

A 质朴的想法,每一行都放 ryxyryx...,然后因为有 \(40\) 列所以最后一列完全没用,所以把那一行竖着放进去,算一下有 \(2223\) 个。 然后枚举填多少行,如果数量多了就在最后一行选一个位置插入字符(这样后面就没有斜着的贡献了)。还多就从后往前覆盖 y。然后总可以构造出…

ubuntu无法进入系统

ubutun重启卡在initramfs,无法进入系统_initramfs进不了界面-CSDN博客

matplotlib 斜体

matplotlib 斜体在 Matplotlib 中,斜体(Italic)字体可以用于改善图表的可读性或美观度。要设置斜体字体,你可以使用 Matplotlib 的字体属性。这可以通过几种方式实现,比如直接在文本字符串中使用 LaTeX 风格的斜体命令,或者使用字体属性字典来指定斜体。使用 LaTeX 风格的…

水务行业的数字化转型之路:四大挑战与展望

随着数字时代的全面到来,各行各业都在积极探索数字化转型的路径,而作为国民经济命脉之一的水务行业也不例外。水务行业的数字化转型不仅是技术革新的必然趋势,更是提升水资源管理效率、保障水安全、促进生态文明建设的关键举措。然而,在这一转型过程中,我们面临着诸多挑战…

【内核】【转载】记一次Linux Hung Task分析过程

vmcore-dmesg.txt截图如下,崩溃栈里面有我们产品的驱动,现在要分析出是不是我们导致的。系统崩溃是因为触发了hung task检测条件,系统panic了。所谓hung task,就是进程的状态为D状态,即TASK_UNINTERRUPTIBLE状态,短时间的D状态是正常的,长时间就会有问题了,可能系统IO有…

Salesforce AI Specialist篇之 Prompt Builder

本篇参考: https://salesforce.vidyard.com/watch/UUAxcUfHYGAxH3D9wV1RxJ https://help.salesforce.com/s/articleView?id=sf.prompt_builder_about.htm&type=5 https://www.lightningdesignsystem.com/guidelines/conversation-design/overview/ 一. 什么是Prompt Temp…