webpack基础配置及使用

webpack是什么

  • 是一个现代 JavaScript 应用程序的静态模块打包器。当webpack 处理应用程序时,它会递归地构建一个依赖关系图 ,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle
  • 主要有 五个核心概念:
    • 入口entry:指示 webpack 从哪个文件开始打包。
    • 输出output:会告诉 webpack 打包完的文件输出到哪里去,以及如何命名这些文件,默认值为 ./dist:
    • 加载器loaderwebpack 只能处理 JavaScript、json等资源,其他资源需要借助loader 才能解析。
    • 插件plugins: 扩展webpack 的功能。使用一个插件也非常容易,只需要 require() ,然后添加到 plugins 数组中。
    • 模式mode:主要是两种模式
      • 开发模式:development
      • 生产模式:production

配置

  • 初始化包:npm init -y

    • 包名不能是webpack
  • 下载依赖:npm i webpack webpack-cli -D

    • npm代理设置

      # 设置http代理
      npm config set proxy http://ip:port
      npm config set https_proxy http://ip:port
      
    • npm代理设置为空

      npm config set proxy null
      npm config set https-proxy null
      
    • 更换淘宝镜像:npm config set registry https://registry.npmmirror.com

  • 从入口打包:npx webpack 入口js文件 --mode=development

    • 打包好后在dist里面

配置文件

const path = require("path"); //nodejs核心模块,专门用来处理路径问题module.exports = {//入口entry: "./src/main.js", //相对路径//输出output:{//文件的输出路径//__dirname nodejs的变量,代表当前文件的文件夹目录path: path.resolve(__dirname, "dist"), //绝对路径filename:"main.js",},//加载器module: {rules: [//loader的配置],},//插件plugins: [//plugin的配置],//模式mode: "development",
};

处理样式资源

1.处理什么资源就要先引入什么资源

2.根据官方文档去下载对应的loadernpm install --save-dev css-loader

3.把loader引用到配置中

//加载器module: {rules: [//loader的配置{test:/\.css$/, //只检测.css文件use: [ //执行顺序,从右到左(从下到上"style-loader", //将js中css通过创建style标签添加html文件中生效"css-loader", //将css资源编译成common.js的模块到js中],},],},

4.用几个包就要下载几个包,运行通过报错知道style-loader没有下载,则npm i style-loader -D

处理Less资源

步骤类似

  • 下载对应的loadernpm install less less-loader --save-dev

  • 引入loader

    {test: /\.less$/i,//loader: 'xxx' //只能使用一个loaderuse: [// 使用多个loader'style-loader','css-loader','less-loader', //将less编译成css文件],},
    

处理sass资源

  • 下载loadernpm install sass-loader sass webpack --save-dev

  • 引入loader

    {test: /\.s[ac]ss$/i,use: [// 将 JS 字符串生成为 style 节点'style-loader',// 将 CSS 转化成 CommonJS 模块'css-loader',// 将 Sass 编译成 CSS'sass-loader',],},
    

处理stylus资源

  • 下载loadernpm install stylus stylus-loader --save-dev

  • 引入loader

    {test: /\.styl$/,use: ['style-loader','css-loader','stylus-loader', //将stylus编译成css文件],},
    

处理图片资源

处理图片资源webpack已经内置这个功能了,但想要让图片转base64进行优化,可以加入下面的loader配置

{test: /\.(png|jpe?g|gif|webp|svg)$/,type: 'asset',parser: {dataUrlCondition: {//小于10kb的图片转base64//优点:减少请求数量 缺点:体积会更大maxSize: 10 * 1024 // 10kb},},},

修改输出文件目录

希望不同的资源去不同的路径下寻找,这样更简洁明了。对应的路径可以在output下修改:

//输出output:{//所有文件的输出路径//__dirname nodejs的变量,代表当前文件的文件夹目录path: path.resolve(__dirname, "dist"), //绝对路径//入口文件打包输出文件名filename:"static/js/main.js",},

而图片可以添加generator修改路径:

{test: /\.(png|jpe?g|gif|webp|svg)$/,type: 'asset',parser: {dataUrlCondition: {//小于10kb的图片转base64//优点:减少请求数量 缺点:体积会更大maxSize: 10 * 1024 // 10kb},},generator: {//输出图片名称//hash:10 hash值只取前10位filename: 'static/images/[hash:10][ext][query]',},},

自动清空上次打包的内容

output里面添加clean: true即可,原理是:在打包前,将path整个目录的内容清空,再进行打包

处理字体图标资源

处理场景有很多,这个以阿里巴巴的图标库为例。

  • 1.下载阿里巴巴素材库中的图标,以供使用。

  • 2.下载好安装包,打开demo_index.html来进行操作,以其中font-class为例。
    在这里插入图片描述

  • 3.引入iconfont.css,并根据自己引入的位置将最上方的url设置正确

    • main.js也要importcss
  • 4.引入iconfont.ttficonfont.wofficonfont.woff2

  • 5.挑选相应图标并获取类名,应用于页面:<span class="iconfont icon-xxx"></span>

处理其他资源

有视频等其他资源就在test里面添加就可以了

{test: /\.(ttf|woff2?|mp3|mp4|avi)$/,type: 'asset/resource', //这个就不要转换成base64generator: {//输出图片名称filename: 'static/media/[hash:10][ext][query]',},},

处理js资源

  • webpack对js处理是有限的,只能编译js中ES模块化语法,不能编译其他语法,导致js不能在IE等浏览器上运行,所以希望能做一些兼容性处理。
    • 针对js兼容性处理,使用Babel来完成。
    • 针对代码格式,使用Eslint来完成。

Eslint使用

  • 检测代码的错误

  • 1.安装插件:npm install eslint-webpack-plugin --save-devnpm install eslint --save-dev

  • 2.插件与loader不一样,需要引入后才能用:const ESLintPlugin = require('eslint-webpack-plugin');

  • 3.添加plugins配置,选择检测哪些文件

    plugins: [//plugin的配置new ESLintPlugin({//检测哪些文件context: path.resolve(__dirname, "src"),}),],
    
  • 4.配置文件.eslintrc.js(只是一些常规的

    module.exports = {// 继承 Eslint 规则extends: ["eslint:recommended"],env: {node: true, // 启用node中全局变量browser: true, // 启用浏览器中全局变量},parserOptions: {ecmaVersion: 6, // es6sourceType: "module", // es module},rules: {"no-var": 2, // 不能使用 var 定义变量},};
  • 5.若想忽略一些文件夹的检测,就创建.eslintignore,在里面写文件名即可

Babel

  • 将一些新的语法转换成旧的,以起到兼容的作用

  • 1.下载包:npm install -D babel-loader @babel/core @babel/preset-env

  • 2.导入loader

    {test: /\.js$/,exclude: /(node_modules)/, //排除node_modules中的js文件(这些文件不处理loader: 'babel-loader',options: {presets: ['@babel/preset-env'],},},
    

处理Html资源

  • 不需要手动引入js,通过插件自动引入

  • 1.安装包:npm install --save-dev html-webpack-plugin

  • 2.在webpack.config.js引入const HtmlWebpackPlugin = require('html-webpack-plugin');

  • 3.在plugins里添加

    new HtmlWebpackPlugin({//模板,以public/index.html文件创建新的html文件//新的文件特点:1、结构和原来一致 2、自动引入打包输出的资源template: path.resolve(__dirname, "public/index.html"),}),
    

开发服务器&自动化

  • 1.下载包:npm i webpack-dev-server -D

  • 2.在webpack.config.js引入

    //开发服务器devServer:{host: "localhost", //启动服务器域名port: "3000", //启动服务器端口号open: true, //是否自动打开浏览器},
    
  • 3.启动指令是:npx webpack serve

  • PS:开发服务器不会输出资源,在内存中编译打包的

生产模式准备工作

  • 生产模式是开发完成代码后,需要将代码部署上线。这个模式主要是对代码进行优化,从以下两个角度:
    • 代码运行性能
    • 代码打包速度
  • dev是开发者模式,没有输出。
    • 开发模式配置了devServer之后是不输出资源的,在内存中编译打包。
    • 命令:webpack serve --config ./config/webpack.dev.js(根据自己的路径找js
  • prod是生产模式,有输出。
    • 生产模式不需要devServer,它只需要打包输出即可。
    • 命令:webpack --config ./config/webpack.prod.js

提取css成单独文件

  • css文件目前被打包到js文件中,当js文件加载时,会创建一个style标签来生成样式,这样对于网站而言,会出现闪屏现象,用户体验不好。我们应该是单独的css文件,通过link标签加载,这样性能才会好。

  • 1.下载包:npm install --save-dev mini-css-extract-plugin

  • 2.在webpack.prod.js上方引入插件:const MiniCssExtractPlugin = require("mini-css-extract-plugin");

  • 3.把文件中'style-loader',都换成MiniCssExtractPlugin.loader,

  • 4.plugins里面添加new MiniCssExtractPlugin(),

    • 可以通过filename来设置生成的css所在的路径

      new MiniCssExtractPlugin({filename: "static/css/main.css",}),
      

样式兼容性处理

  • 1.下载包:npm i postcss-loader postcss postcss-preset-env -D

  • 2.在css-loader都加上:

    {loader: "postcss-loader",options: {postcssOptions: {plugins: ["postcss-preset-env", //能解决大部分样式兼容性问题],},},},
    
  • 3.可以在package.json里添加要控制什么兼容条件

    "browserslist": ["last 2 version","> 1%","not dead"]
    

封装样式loader函数

相同的代码可以封装成函数,简化代码。

//用来获取处理样式的loader
function getStyleLoader(pre){return [MiniCssExtractPlugin.loader, //提取css成单独文件"css-loader", //将css资源编译成common.js的模块到js中{loader: "postcss-loader",options: {postcssOptions: {plugins: ["postcss-preset-env", //能解决大部分样式兼容性问题],},},},pre,].filter(Boolean);
}

css压缩

  • css-minimizer-webpack-plugin使用 cssnano优化和压缩css,就像 optimize-css-assets-webpack-plugin一样,但在 source mapsassets中使用查询字符串会更加准确,支持缓存和并发模式下运行。
  • 1.下载包:npm install css-minimizer-webpack-plugin --save-dev
  • 2.在webpack.prod.js上方引入插件:const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
  • 3.plugins里面添加new CssMinimizerPlugin(),

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

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

相关文章

电源技术中的TPHR8504PL,LQ(M1W 40V高速同步N沟道150A 功率MOSFET用于高效DC-DC转换器

TPHR8504PL,LQ&#xff08;M1W是一种MOSFET&#xff08;金属氧化物半导体场效应晶体管&#xff09;&#xff0c;它是40 Volt N-沟道MOSFET&#xff0c;由N型沟道和P型衬底构成&#xff0c;而P-沟道MOSFET则由P型沟道和N型衬底构成。 TPHR8504PL,LQ&#xff08;M1W N-沟道MOSFE…

2024 ssh连接linux ,包括连接被拒的解决方案

这里以windows系统 连接 linux&#xff08;centOS&#xff09;为例&#xff1a; 一、如果windows 连接时出现&#xff1a; Permission denied, please try again. 连接被拒绝&#xff0c;做出以下修改&#xff1a; 打开linux - Terminal 输入&#xff1a;cat /etc/ssh/sshd_c…

【算法 高级数据结构】树状数组:一种高效的数据结构(一)

&#x1f680;个人主页&#xff1a;为梦而生~ 关注我一起学习吧&#xff01; &#x1f4a1;专栏&#xff1a;算法题、 基础算法~赶紧来学算法吧 &#x1f4a1;往期推荐&#xff1a; 【算法基础 & 数学】快速幂求逆元&#xff08;逆元、扩展欧几里得定理、小费马定理&#x…

Python与FPGA——图像锐化

文章目录 前言一、图像锐化二、Python robert锐化三、Python sobel锐化四、Python laplacian锐化五、FPGA sobel锐化总结 前言 在增强图像之前一般会先对图像进行平滑处理以减少或消除噪声&#xff0c;图像的能量主要集中在低频部分&#xff0c;而噪声和图像边缘信息的能量主要…

品牌要把控质量也要管控价格

在品牌发展的道路上&#xff0c;产品质量的把控非常重要&#xff0c;关系到品牌的竞争力&#xff0c;但品牌要长期发展&#xff0c;产品要获得市场足够份额&#xff0c;还需要有稳定的价格体系做支撑&#xff0c;这个价格不是仅凭品牌单方面的定价而定&#xff0c;而是整个渠道…

Oracle定时任务和存储过程

--1.声明定时任务 DECLAREjob NUMBER; BIGIN dbms_job.sumit(job, --任务ID,系统定义的test_prcedure(19)&#xff0c;--调用存储过程&#xff1f;to_date(20240305 02:00&#xff0c;yyyymmdd hh24:mi) --任务开始时间sysdate1/(24*60) --任务执行周期 [每分钟执行…

商业前端TS开发自动化工具

本期作者 一、背景 商业侧的业务比较复杂&#xff0c;B端项目中含有大量常量类的类型判断&#xff0c;且因历史原因&#xff0c;很多常量值前端无法直接知其含义&#xff0c;这既不利于新人的上手&#xff0c;也不利于项目的维护。 在开发协作上&#xff0c;前后端的API沟通&a…

什么是工业边缘网关?工业边缘网关有什么作用?

在数字化和智能化的浪潮下&#xff0c;工业领域正迎来前所未有的变革。其中&#xff0c;工业边缘网关作为这场变革中的重要角色&#xff0c;正逐渐受到人们的关注。那么&#xff0c;什么是工业边缘网关&#xff1f;它如何在工业数字化中发挥作用&#xff1f;今天&#xff0c;就…

Wireshark——获取捕获流量的前N个数据包

1、问题 使用Wireshark捕获了大量的消息&#xff0c;但是只想要前面一部分。 2、方法 使用Wireshark捕获了近18w条消息&#xff0c;但只需要前5w条。 选择文件&#xff0c;导出特定分组。 输入需要保存的消息范围。如&#xff1a;1-50000。 保存即可。

环链表寻找交点

目录 1.题目描述和出处 2.分析 3.代码 1.题目描述和出处 LCR 022. 环形链表 II - 力扣&#xff08;LeetCode&#xff09; 描述很简单&#xff0c;寻找交点&#xff0c;找到则返回交点&#xff0c;找不到返回空。 2.分析 如图&#xff1a;&#xff08;b表示环的长度&#…

springboot3.x集成nacos踩坑,并实现多环境配置

一、nacos安装部署 springboot3.x集成Nacos首先需要将Nacos从1.x升级到2.x&#xff0c;建议直接安装2.x版本&#xff0c;手动将1.x的配置信息迁移到2.x中&#xff0c;先并行一段时间&#xff0c;待全部迁移完成稳定运行之后再停掉1.x&#xff0c;升级和安装、操作请查看官方文…

DailyNotes个人笔记管理工具

DailyNotes 是记录笔记和跟踪任务的应用程序&#xff0c;使用markdown进行编辑 部署 下载镜像 docker pull m0ngr31/dailynotes创建目录并授权 mkdir -p /data/dailynotes/config_dir chmod -R 777 /data/dailynotes启动容器 docker run -d --restart always --name mynot…

Java中的数据压缩和存储技术:Zip、GZip与Brotli

第1章&#xff1a;引言 大家好&#xff0c;我是小黑&#xff0c;作为一名Java程序员&#xff0c;在业务开发中&#xff0c;常常面临着一个问题&#xff1a;如何高效地处理和传输这些庞大的数据呢&#xff1f;答案就在于数据压缩技术。数据压缩&#xff0c;简而言之&#xff0c…

SpringBoot+Ajax+redis实现隐藏重要接口地址

&#x1f3e1;浩泽学编程&#xff1a;个人主页 &#x1f525; 推荐专栏&#xff1a;《深入浅出SpringBoot》《java对AI的调用开发》 《RabbitMQ》《Spring》《SpringMVC》《项目实战》 &#x1f6f8;学无止境&#xff0c;不骄不躁&#xff0c;知行合一 文章目录 …

九型人格测试,8号领袖型人格的职业分析

8号人格&#xff0c;也叫领袖型人格&#xff0c;在九型人格中间&#xff0c;是一种天生领导的存在。他们生性开朗&#xff0c;能够和其他人建立良好的关系&#xff0c;为人不拘小节&#xff0c;遇强则强&#xff0c;坚守心中的理想和正义。不喜欢被人控制&#xff0c;喜欢自己当…

Java并发-并发模型

可以使用不同的并发模型来实现并发系统。一并发模型指定的系统协作线程如何完成他们给予的任务。不同的并发模型以不同的方式拆分任务&#xff0c;线程可以以不同的方式进行通信和协作。本并发模型教程将更深入地介绍撰写本文时&#xff08;2015年至2019年&#xff09;使用的最…

大模型时代,华为与中软国际携手“打通AI落地应用最后一公里”

文 | 智能相对论 作者 | 叶远风 大模型驱动千行百业智能化变革已经成为广泛共识&#xff0c;下一步的问题是&#xff0c;企业要如何更好地推进&#xff1f; 近日&#xff0c;“2024中关村论坛系列活动——第二届北京人工智能产业创新发展大会”在北京国家会议中心成功举办&a…

yudao-cloud 学习笔记

前端代码 浏览器打开 https://cloud.iocoder.cn/intro/ F12 执行代码 var aaa $(".sidebar-group-items").find("a"); var ll[]; var tt[]; for(var i0;i<aaa.length;i ){ ll.push("https://doc.iocoder.cn" $(aaa[i]).attr("href&quo…

Hi3516DV500+SC2210 AIISP 黑光相机

1. Hi3516DV500 Hi3516DV500是一颗面向行业市场推出的高清智能网络摄像头SoC。该芯片最高支持2路sensor输入&#xff0c;支持最高5M30fps的ISP图像处理能力&#xff0c;支持2F WDR、多级降噪、六轴防抖、多光谱融合等多种传统图像增强和处理算法&#xff0c;支持通过AI算法对输…

第11周,第三期技术动态

大家好&#xff0c;才是真的好。 真没想到&#xff0c;本周是今年第十一周&#xff0c;2024年还有不到三百天就结束了。 今天周五&#xff0c;我们继续介绍与Domino相关产品新闻&#xff0c;以及互联网或其他IT行业动态等。 一、在Windows 10和Windows 11上运行Domino和Trav…