当前位置: 首页 > news >正文

从0到1搭建webpack

好,上一篇文章我们说了一下在react中怎么弄这个webpack,那么现在在说一下不用react我们又该怎么配置,这些呢也都是我自己通弄过看视频自己总结的,拿来给大家分享一下。

前期准备条件

1、nvm(可以快速切换node版本)

下载地址:Releases · coreybutler/nvm-windows · GitHub

下载这两个nvm安装包其中一个即可。

解决下载速度慢的问题

nvm文件夹下的settings.txt文件,复制进去镜像代码

node_mirror:https://npm.taobao.org/mirrors/node/

npm_mirror:https://npm.taobao.org/mirrors/npm/

ps:webpack基于nodejs,nodejs又基于commonjs。

webpack基本配置

webpack创建命令:npx webpack init ./ --force --template=default

module:项目中每一个文件可以理解成chunk,打包后的文件叫module。

entry:一个页面对应一个入口,单页面只需要一个入口即可。

output:打包之后的代码路径。打包完成后代码放在哪里

devServer:开发环境配置。

mode:‘production’,设置生产环境。

plugins:数组形式,存放插件。

mini-css-extract-plugin使用这个插件可以打包出css文件。用于生产环境。

css-loader把css文件变成webpack自己认识的js。

style-loader把js变成style标签插入到页面中,用于开发依赖。使用这个loader打包之后不出现css文件。

关于样式的loader从右向左读取。

配置css

配置css需要通过命令:npm i postcss-loader --save-dev、npm i autoprefixer --save-dev进行下载postcss-loader和autoprefixer

postcss-loader只是一个编译平台,并且需要下载autoprefixer插件,还需要在src统计创建文件postcss.config.js,代码如下:

//postcss.config.jsmodule.exports = {plugins: [require('autoprefixer')]
}

webpack.config.js文件代码如下:

// Generated using webpack-cli https://github.com/webpack/webpack-cli
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");const isProduction = process.env.NODE_ENV == "production";//核心
const config = {entry: "./src/index.js", //入口文件output: {//代码生成路径path: path.resolve(__dirname, "dist2"),},devServer: {//本地开发环境open: true,host: "localhost",},plugins: [//插件new HtmlWebpackPlugin({template: "index.html",}),new MiniCssExtractPlugin(),// Add your plugins here// Learn more about plugins from https://webpack.js.org/configuration/plugins/],module: {//资源解析、编译rules: [{test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,type: "asset",},{test: /\.css$/i,use: [MiniCssExtractPlugin.loader,"css-loader","postcss-loader", //这是一个编译平台],},// Add your rules for custom modules here// Learn more about loaders from https://webpack.js.org/loaders/],},mode: "production", //设置生产环境};module.exports = () => {if (isProduction) {config.mode = "production";config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());} else {config.mode = "development";}return config;
};

我们可以利用postcss和autoprefixer自动给css样式添加前缀,使得css样式在各种浏览器都兼容。

之后再次通过npx webpack build打包得到打包之后的css文件如下:

/*!*******************************************************************************************************!*\!*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./index.css ***!\*******************************************************************************************************/
body{background: pink;
}.app{display: flex;transition: all 1s;-webkit-user-select: none;-moz-user-select: none;user-select: none;background: linear-gradient(to bottom,white,black);
}

那么如果你去使用css next怎么配置呢?只需要改postcss.config.js文件的代码即可:

//postcss-cssnext包含自动添加前缀功能module.exports = {plugins: [// require('autoprefixer')require('postcss-cssnext')]
}

当然了,记得安装npm i postcss-cssnext --save-dev

关于js部分的配置

Babel环境配置(js)

下载依赖:npm install --save-dev @babel/core @babel/cli @babel/preset-env

Webpack.config.js中设置规则:

        {test: /\.js$/i,use:{loader: "babel-loader",}}

为了能够编译jsx语法的代码,还需要进行babel预设

在src文件夹同级创建babel.config.js文件,

{"presets":["@babel/preset-react"]
}

同时下载依赖npm i --save-dev @babel/preset-react

ps:preset就是babel帮你准备好的可以直接使用的插件组合

html部分

首先安装插件:npm i --save-dev html-webpack-plugin

package.config.js:

const HtmlWebpackPlugin = require("html-webpack-plugin"); plugins: [new HtmlWebpackPlugin({template: "index.html",}),
]

打包之后,html文件多了两个标签,一个script标签引入js,link引入css

Ps:webpack打包出来的script标签有defer

在 Webpack 打包过程中,deferasync 是两种用于加载 JavaScript 文件的属性,它们的用途和行为有所不同。以下是它们的详细说明和区别:

defer 推迟

  • 用途defer 属性用于告诉浏览器在文档解析完成后再执行脚本。
  • 执行顺序:带有 defer 属性的脚本会按照它们在文档中的出现顺序依次执行。这意味着如果有多个带 defer 的脚本,它们会按照它们在 HTML 中的顺序执行。
  • 适用场景:适合需要在 DOM 完全加载后执行的脚本,尤其是依赖于 DOM 元素的脚本。

async

  • 用途async 属性用于告诉浏览器立即下载脚本,但不等待文档解析完成就执行它。
  • 执行顺序:带有 async 属性的脚本会在下载完成后立即执行,而不考虑它们在文档中的顺序。这意味着如果有多个带 async 的脚本,它们的执行顺序是不确定的,取决于下载的速度。
  • 适用场景:适合独立的脚本,尤其是那些不依赖于其他脚本或 DOM 的脚本,比如分析工具或广告脚本。

总结

  • 执行时机

    • defer:等到文档解析完成后执行。
    • async:下载完成后立即执行,无需等待文档解析。
  • 执行顺序

    • defer:按照在文档中的顺序执行。
    • async:执行顺序不确定,取决于下载速度。

使用示例

<!-- 使用 defer -->
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>
<!-- script1.js 和 script2.js 会按照顺序执行 --><!-- 使用 async -->
<script src="script1.js" async></script>
<script src="script2.js" async></script>
<!-- script1.js 和 script2.js 的执行顺序不确定 -->

在使用 Webpack 打包时,可以通过配置来指定这些属性,以优化应用的加载性能。

对于devServer的设置

package.config.js:

devServer: {//本地开发环境open: true,host: "localhost",static:{directory: path.join(__dirname, "public"),},compress: true, //开启压缩port: 9000,},

调试

开发的时候需要设置成开发模式

mode: "development", //设置开发环境

相关文章:

从0到1搭建webpack

好&#xff0c;上一篇文章我们说了一下在react中怎么弄这个webpack&#xff0c;那么现在在说一下不用react我们又该怎么配置&#xff0c;这些呢也都是我自己通弄过看视频自己总结的&#xff0c;拿来给大家分享一下。 前期准备条件 1、nvm&#xff08;可以快速切换node版本&am…...

针对解决conda环境BUG的个人笔记

1-conda学习&安装 安装视频&#xff1a; 零基础教程&#xff1a;基于Anaconda和PyCharm配置Pytorch环境_哔哩哔哩_bilibili 安装过程&#xff1a; MX250笔记本安装Pytorch、CUDA和cuDNN-CSDN博客 Win10MX250CUDA10.1cuDNNPytorch1.4安装测试全过程(吐血)_nvidia geforc…...

读《Effective Java》笔记 - 条目13

条目13&#xff1a;谨慎重写clone方法 浅拷贝和深拷贝 浅拷贝&#xff08;Shallow Copy&#xff09; 浅拷贝 只复制对象本身&#xff0c;而不复制对象引用的成员。 对于引用类型的字段&#xff0c;浅拷贝会将原对象的引用复制到新对象中&#xff0c;而不会创建新对象实例。因…...

SQL 之连接查询

SQL 连接查询&#xff1a;深入理解 JOIN 操作 在数据库管理中&#xff0c;连接查询&#xff08;JOIN&#xff09;是一种基本而强大的操作&#xff0c;它允许我们从两个或多个表中检索数据。SQL 中的 JOIN 操作使得数据整合变得简单&#xff0c;这对于数据分析和报告至关重要。…...

vscode切换anaconda虚拟环境解释器不成功

问题&#xff1a; 切换解释器之后运行代码还是使用的原来的解释器 可以看到&#xff0c;我已经切换了“nlp”解释器&#xff0c;我的nltk包只在“nlp”环境下安装了&#xff0c;但是运行代码依然是"torch"解释器&#xff0c;所以找不到“nltk”包。 在网上找了各种…...

一个实用的 Maven localRepository 工具

目录 1 现状2 当前解决3 更好的解决3.1 下载 Maven localRepository 工具包3.2 上传本地 localRepository 包3.3 清理 localRepository 中指定后缀的文件 1 现状 在使用 Maven 时&#xff0c;我们可能会经常与本地仓库和私服仓库打交道。 例如对于本地仓库&#xff0c;因为某…...

目标检测,图像分割,超分辨率重建

目标检测和图像分割 目标检测和图像分割是计算机视觉中的两个不同任务&#xff0c;它们的输出形式也有所不同。下面我将分别介绍这两个任务的输出。图像分割又可以分为&#xff1a;语义分割、实例分割、全景分割。 语义分割&#xff08;Semantic Segmentation&#xff09;&…...

微信小程序 城市点击后跳转 并首页显示被点击城市

在微信小程序中&#xff0c;渲染出城市列表后&#xff0c;如何点击城市&#xff0c;就跳转回到首页&#xff0c;并在首页显示所点击的城市呢&#xff1f; 目录 一、定义点击城市的事件 二、首页的处理 首页&#xff1a;点击成都市会跳转到城市列表 城市列表&#xff1a;点击…...

Linux - nfs服务器

五、nfs服务器 1、基础 NFS服务器可以让PC将网络中的NFS服务器共享的目录挂载到本地端的文件系统中&#xff0c;而在本地端的系统 中看来&#xff0c;那个远程主机的目录就好像是自己的一个磁盘分区一样。 由于NFS支持的功能比较多&#xff0c;而不同的功能都会使用不同的程…...

uniapp图片上传预览uni.chooseImage、uni.previewImage

文章目录 1.上传图片2.预览图片 1.上传图片 uni.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照。 App端如需要更丰富的相机拍照API&#xff08;如直接调用前置摄像头&#xff09;&#xff0c;参考plus.camera 微信小程序从基础库 2.21.0 开始&#xff0c; wx.choos…...

C++ 字符串中数字识别

【问题描述】 输入一个字符串&#xff0c;含有数字和非数字字符&#xff0c;如“sumabc234;while(abc700)tab{ass346;bssabc267;}”&#xff0c;将其中连续的数字作为一个整数&#xff0c;依次存放到一个数组nums中。例如&#xff0c;234放在nums[0]&#xff0c;700放在nums[1…...

学术中常见理论归纳总结-不定期更新

1.信息传播类 1.1 扩散创新理论 创新扩散理论是传播效果研究的经典理论之一,是由美国学者埃弗雷特罗杰斯(E.M.Rogers)于20世纪60年代提出的一个关于通过媒介劝服人们接受新观念、新事物、新产品的理论,侧重大众传播对社会和文化的影响。 1927-1941年进行的“艾奥瓦杂交玉…...

ModelSim怎么修改字体及大小

点击TOOLS 选择PERFERENCES选择下一级菜单的TEXTFONT/CHOOSE/选择字体和大小最后不要忘记点apply再退出...

图片预处理技术介绍4——降噪

图片预处理 大家好&#xff0c;我是阿赵。   这一篇将两种基础的降噪算法。   之前介绍过均值模糊和高斯模糊。如果从降噪的角度来说&#xff0c;模糊算法也算是降噪的一类&#xff0c;所以之前介绍的两种模糊可以称呼为均值降噪和高斯降噪。不过模糊算法对原来的图像特征的…...

Scrapy管道设置和数据保存

1.1 介绍部分&#xff1a; 文字提到常用的Web框架有Django和Flask&#xff0c;接下来将学习一个全球范围内流行的爬虫框架Scrapy。 1.2 内容部分&#xff1a; Scrapy的概念、作用和工作流程 Scrapy的入门使用 Scrapy构造并发送请求 Scrapy模拟登陆 Scrapy管道的使用 Scrapy中…...

D84【python 接口自动化学习】- pytest基础用法

day84 pytest常用断言类型 学习日期&#xff1a;20241130 学习目标&#xff1a;pytest基础用法 -- pytest常用断言类型 学习笔记&#xff1a; 常用断言类型 代码实践 def test_assert():assert 11assert 1!2assert 1<2assert 2>1assert 1>1assert 1<1assert a…...

如何正确书写sh文件/sh任务?bash任务

正确书写xx.sh文件的方式为&#xff1a; source /usr/local/miniconda3/bin/activate condaEnv export CUDA_VISIBLE_DEVICES0 cd /hy-tmp/test export PYTHONPATH"xxx:$PYTHONPATH" python AAA.py python BBB.py python CCC.py 直接运行&#xff1a; bash xx.sh 即可…...

多线程篇-5--线程分类(线程类型,springboot中常见线程类型,异步任务线程)

常见的线程类型包括用户线程&#xff08;User Threads&#xff09;、守护线程&#xff08;Daemon Threads&#xff09;、主线程&#xff08;Main Thread&#xff09;、工作线程&#xff08;Worker Threads&#xff09;和线程池中的线程。 一、用户线程&#xff08;User Thread…...

docker快速部署gitlab

文章目录 场景部署步骤默认账号密码效果 场景 新增了一台机器, 在初始化本地开发环境&#xff0c;docker快速部署gitlab 部署步骤 编写dockerfile version: 3.7services:gitlab:image: gitlab/gitlab-ce:latestcontainer_name: gitlabrestart: alwayshostname: gitlabenviron…...

C# 数据类型详解:掌握数据类型及操作为高效编码奠定基础

本文将带你深入了解C#中各种数据类型的特点、用途和最佳实践&#xff0c;让你不仅能熟练运用基本类型&#xff0c;还能掌握如何在实际项目中做出最合适的选择。 目录 C#基本语法 C#数据类型 C#类型转换 C#变量常量 C#基本语法 在学习C#之前我们要先知道C#的基础构建是由哪些…...

burp2

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&a…...

[ACTF2020 新生赛]BackupFile--详细解析

信息搜集 让我们寻找源文件&#xff0c;目录扫描&#xff1a; 找到了/index.php.bak文件&#xff0c;也就是index.php的备份文件。 后缀名是.bak的文件是备份文件&#xff0c;是文件格式的扩展名。 我们访问这个路径&#xff0c;就会直接下载该备份文件。 我们把.bak后缀删掉…...

循环神经网络(RNN)简述

RNN及其变体 1、概述 (一)、概念 RNN(Recurrent Neural Network), 中文称作循环神经网络, 它一般以序列数据为输入, 通过网络内部的结构设计有效捕捉序列之间的关系特征, 一般也是以序列形式进行输出。 RNN的循环机制使模型隐层**上一时间步产生的结果, 能够作为当下时间步…...

九、Ubuntu Linux操作系统

一、Ubuntu简介 Ubuntu Linux是由南非人马克沙特尔沃思(Mark Shutteworth)创办的基于Debian Linux的操作系统&#xff0c;于2004年10月公布Ubuntu是一个以桌面应用为主的Linux发行版操作系统Ubuntu拥有庞大的社区力量&#xff0c;用户可以方便地从社区获得帮助其官方网站:http…...

SpringBoot 新冠密接者跟踪系统:校园疫情防控的智能守护者

摘 要 信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲&#xff0c;遇到了互联网时代才发现能补上自古…...

【Ubuntu】E: Unable to locate package xxx

报错描述 在 Ubuntu 上 执行 apt install xxx 出现下面的报错&#xff1a; 即无法定位到该 Package&#xff0c;一般形式如下&#xff1a; # apt install xxx Reading package lists... Done Building dependency tree... Done Reading state information... Done E: Unable …...

vue多页面应用集成时权限处理问题

在多页面应用&#xff08;MPA&#xff09;中&#xff0c;权限管理通常会涉及到每个页面的访问控制、身份验证、以及权限校验。以下是几种常见的权限处理方式&#xff1a; 1. 前端路由权限控制 原理&#xff1a;虽然是多页面应用&#xff0c;通常每个页面会独立加载和渲染&…...

Socket编程(TCP/UDP详解)

前言&#xff1a;之前因为做项目和找实习没得空&#xff0c;计算机网络模块并没有写成博客&#xff0c;最近得闲了&#xff0c;把计算机网络模块博客补上。 目录 一&#xff0c;UDP编程 1&#xff09;创建套接字 2&#xff09;绑定端口号 3&#xff09;发送与接收数据 4&…...

qt QConicalGradient详解

1、概述 QConicalGradient是Qt框架中QGradient的一个子类&#xff0c;它用于创建锥形渐变效果。锥形渐变是从一个中心点出发&#xff0c;沿着360度的圆周扩散的颜色渐变。这种渐变通常用于模拟光线旋转、创建彩虹效果或实现其他复杂的颜色过渡。QConicalGradient允许你定义渐变…...

存储过程与自然语言处理逻辑的不同与结合

在现代软件开发中&#xff0c;存储过程与自然语言处理&#xff08;NLP&#xff09;逻辑都发挥着重要作用。存储过程是一种在数据库内部运行的预编译程序&#xff0c;通常用于处理与数据相关的任务&#xff0c;例如插入、更新、删除数据以及复杂的查询操作。而自然语言处理&…...

做网站需要代码么/网络小说排行榜

歌曲&#xff1a;无间道(电影无间道国语主题曲)歌手&#xff1a;梁朝伟&刘德华 专辑&#xff1a;风沙 我不愿意结束我还没有结束无止境的旅途看着我没停下的脚步已经忘了身在何处谁能改变人生的长度谁知道永恒有多么恐怖谁了解生存往往比命运还残酷只是没有人愿意认输我们都…...

信息分类网站好建吗/青岛网站设计制作

public class User {public static void main(String[] args) {//i行号for (int i 1;i < 9;i){//j列号for (int j 1;j < i;j) {System.out.println(i "*" j "" i * j " ");}System.out.println();//换行}} }...

网址导航网站有哪些/网站搭建一般要多少钱

1&#xff09;主服务器--master --port 20001 2&#xff09;从服务器--slave --source 127.0.0.1:20001 --port 20002 注释&#xff1a;--master 以主服务器形式启动mongod--slave 以从服务器形式启动mongod--source 源&#xff08;主服务器&#xff09;的位置--port 服务商品 …...

动态网站 编辑软件/软文兼职

公告&#xff1a; 为响应国家净网行动&#xff0c;部分内容已经删除&#xff0c;感谢读者理解。话题&#xff1a;佳铁精雕机在程式里怎么更改G57之后的坐标回答&#xff1a;直接更改程式里的默认G54改成58啊或者G59都可以前提是你机台设置了这些坐标&#xff01;话题&#xff1…...

网站建设需要的费用/如何优化关键词的方法

Linux开发板 - 01 - 远程通讯/控制&#xff08;SSH/VNC/FTP&#xff09; 前言&#xff1a;最近向学校实验室借了一块Linux开发板&#xff08;我一开始还以为是树莓派&#xff0c;本来想借树莓派的&#xff09;&#xff0c;开始接下来一段时间会记录学习过程。我借的是韦东山的J…...

哪个网站做农产品/河北seo网络推广

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者。&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4d…...