webpack工具

news/2024/3/29 14:43:08/文章来源:https://blog.csdn.net/qq_60306931/article/details/130373731

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版,配图更多,CSDN博文图片需要手动上传,因此文章配图较少,看不懂的可以去菜鸡博客参考一下配图!

系列文章目录

前端系列文章——传送门
后端系列文章——传送门


文章目录

  • 私人博客
  • 系列文章目录
  • webpack工具
    • webpack介绍
    • webpack使用
      • 下载安装
      • 打包准备工作
        • 配置文件
        • 打包命令的配置
        • 被打包文件
      • 具体配置
        • 入口文件配置
        • 出口文件配置
        • 打包模式配置
        • map文件配置
        • 插件配置
          • html插件
            • title选项
            • template选项
            • favicon选项
            • filename选项
            • inject选项
            • hash选项
            • chunks选项
          • 拷贝文件插件
        • 解析器
          • css解析
          • sass解析
          • ES6转ES5
          • 图片解析
        • 服务器配置
    • 项目打包


webpack工具

webpack介绍

项目做好以后,在上线之前还有一些工作需要去做:

  • 压缩css
  • 压缩js
  • 压缩图片
  • 编译sass
  • 合并文件
  • 。。。

等等,在前端工作流出现之前,这些工作都由人力完成,而这些工作往往比写业务本身更加费时,效率非常之低且还容易出错,于是自动化的处理工具也就必然出现了。

前端的构建工具常见的有Grunt、Gulp、Webpack三种,Grunt比较老旧,功能少,更新少,插件少。gulp适用于原生项目的打包,但是在现代的工作中使用非常少。webpack通常被用在框架中,使用量很大,所以我们学习webpack。

webpack使用

下载安装

webpack打包需要下载安装webpack工具,安装方式有两种:

  1. 全局安装 - 在计算机任何一个地方都可以使用 - 通常适用于一次性使用的工具

    npm i webpack webpack-cli -g
    
  2. 局部安装 - 只能在当前文件夹中使用 - 推荐使用方式 - 因为webpack不是一个一次性使用的工具

    npm i webpack webpack-cli
    

有很多项目,在开发过程也需要一边开发一边使用webpack打包项目,所以,webpack不是一个一次性工具,所以建议使用局部安装,只要有项目的地方,都需要下载安装这个工具。

打包准备工作

打包的具体工作,就是在命令行中执行打包命令。但打包的是哪个文件,是否需要压缩,是否需要将es6转成es5的语法等操作,都需要进行配置,所以执行打包命令之前需要先书写打包配置。

配置文件

webpack默认的配置文件为webpack.config.js,也可以是一个自定义的js文件。不管是默认的还是自定义的配置文件,代码必须是导出一个对象。webpack打包配置遵循nodejs的语法规范,所以配置文件的导出操作使用的也是nodejs的导出规范:module.exports = {}

打包命令的配置

  • 如果是全局下载安装的webpack工具,使用的配置文件是webpack默认的配置文件webpack.config.js,直接在配置文件所在目录中执行webpack命令即可。

  • 如果是全局下载安装的webpack工具,使用的配置文件是自定义的配置文件,执行命令需要在配置文件所在目录中执行webpack --config 自定义配置文件命令。

  • 如果是局部下载安装的webpack工具,使用的是默认的配置文件,需要先在package.json文件中配置命令才能执行:

    "scripts": {"自定义命令": "webpack"
    }
    

    执行命令,需要在配置文件所在目录:

    npm run 自定义命令
    
  • 如果是局部下载安装的webpack工具,使用的是自定义的配置文件,需要在package.json文件中配置命令才能执行:

    "scripts": {"自定义命令": "webpack --config 自定义配置文件"
    }
    

    执行命令,需要在配置文件所在目录:

    npm run 自定义命令
    

补充:自定义命令如果是start/restart/stop/test,这4个命令属于npm的关键字命令,执行时可以省略run:npm start/restart/stop/test

被打包文件

webpack默认只能打包js文件,之所以能打包整个项目,是因为有很多js的操作和配置。

webpack默认是打包一个js文件,且js文件的路径为:src/index.js

注意:src文件夹要跟webpack的配置文件在同级目录下。

具体配置

入口文件配置

如果不配置入口文件,默认会打包src文件夹下的index.js文件,如果要打包其他文件,就需要进行配置:

entry: 入口文件路径

例:我们打包src文件夹下的test.js

module.exports = {// 所有配置都在这里定义entry: './src/test.js'
}

entry的值还可以是一个对象,表示多入口,也就是一次性打包多个js文件:

entry: {app: './src/app.js',adminApp: './src/adminApp.js',
},

出口文件配置

如果不配置出口文件,默认会将打包结果放在dist文件夹下的main.js文件中,如果希望生成的目标文件在别的文件夹下,换个新的文件名称,就需要配置出口文件:

output: {path: 文件夹路径,filename: 文件名称,clean: true, // 是否每次清空目标文件夹
}

例:将目标文件放在dest文件夹下的target.js文件中

output: {path: 'dest',filename: 'target.js'
}

配置中的文件夹路径,必须是绝对路径,所以重新修改路径如下:

module.exports = {// 所有配置都在这里定义entry: './src/test.js',output: {path: __dirname + '/dest', // 这里必须是绝对路径filename: 'target.js'}
}

注意:filename的值,可以是具体的文件名称,可以是[contenthash].js,表示生成的文件是一个系统随机创建的文件。如果是多入口打包,可以是[name].js,表示生成的文件名称为:entry中入口文件名称的键.js。单入口文件场景中,[name].js配置不生效。

打包模式配置

打包模式分两种,分别是开发模式和生产模式。区别如下:

production是生产模式,会把打包好后的代码进行压缩,可阅读性不好,但是代码体积小

development是开发模式,不会压缩代码,可阅读性好,但是代码体积大

默认打包规则是生产模式,如果要指定打包模式,需要配置:

mode: development/production

例:将默认的生产模式换成开发模式

module.exports = {// 所有配置都在这里定义entry: './src/index.js',output: {path: __dirname + '/dest',filename: 'target.js'},// 打包模式mode: 'development'
}

可以看出,打包的最终结果,不再是压缩形式的,这是开发模式的打包。

前面每次打包的警告就是表示我们没有配置打包模式

map文件配置

如果打包好的文件在运行的时候报错了,报错在打包的文件中,我们很难找到错误的地方和原因,因为打包生成的文件不是我们手写的,是机器生成的,为了能将错误定位在源文件中,我们需要添加map文件配置:

devtool:"source-map"

如果在我们运行的目标文件中报错了,可以通过这个文件准确的定位到错误的源文件。

插件配置

webpack默认只能打包js文件,如果要处理html文件或其他文件的操作就需要依赖插件

plgins: [插件配置
]
html插件

插件名称:html-webpack-plugin

下载:npm i html-webpack-plugin

导入:

const htmlwebpackplugin = require('html-webpack-plugin')

插件配置:

const htmlwebpackplugin = require('html-webpack-plugin')
module.exports = {// 所有配置都在这里定义entry: './src/index.js',output: {path: __dirname + '/dest',filename: 'target.js'},// 打包模式mode: 'development',// 插件配置plugins: [// html插件new htmlwebpackplugin({})]
}

默认会在目标文件夹中生成index.html文件,并将我们打包好的js文件注入到这个html中:

如果要打包一个html文件,或对打包后的html进行其他配置,可以配置如下选项:

template: 要打包的html文件,
filename: 生成的目标文件名称,
hash: 是否为每次打包的所有注入的静态资源添加系统生成的随机的唯一hash值,
inject: 向template或者templateContent中注入所有静态资源,不同的配置值注入的位置不经相同,取值:body:所有JavaScript资源插入到body元素的底部true或者head: 所有JavaScript资源插入到head元素中 - 默认false: 所有静态资源css和JavaScript都不会注入到模板文件中
favicon: 添加特定favicon路径到输出的html文档中,
title: 生成的html文档的标题。配置该项,它并不会替换指定模板文件中的title元素的内容,仅限于没有打包的html,要生成html的时候,对生成的html配置标题
chunks: 值是数组,指定我们要注入的入口js文件

配置项测试:

title选项
new htmlwebpackplugin({title: '我打包生成的首页'
})
template选项
new htmlwebpackplugin({title: '我打包生成的首页',template: './src/home.html'
})

在src下新建home.html,内容如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试网页</title>
</head>
<body>
哈哈
</body>
</html>

title选项是不会改变原网页中标题的,只有在没有原网页,需要创建一个html的时候,指定title才有用。

如果指定了template选项后,不会自动创建html文件,是将指定的html页面打包到目标文件夹中。

favicon选项
new htmlwebpackplugin({title: '我打包生成的首页',template: './src/home.html',favicon: './src/favicon.ico'
})

给src文件夹下放一个网站图标

filename选项
new htmlwebpackplugin({title: '我打包生成的首页',template: './src/home.html',favicon: './src/favicon.ico',filename: 'my.html'
})

会将template打包生成新的文件名称:my.html

inject选项

默认为true/‘head’,表示要将打包后的js文件注入到html中,且放在html头部head标签中,false表示不注入,'body’表示将打包后的js文件引入到html的body标签中。

hash选项

默认值为false,当设置为true的时候,打包后的html引入的静态文件,会在地址后面添加随机的参数,目的是为了避免浏览器缓存。

chunks选项

chunks选项适用于多入口且多html的时候,我们希望某些html引入不同的入口中的内容,就给当前html插件配置chunks选项:

plugins: [new htmlwebpackplugin({title: '我打包生成的首页',template: './src/home.html',favicon: './src/favicon.ico',filename: 'my.html',chunks: [entry的入口键, entry中的入口键]}),new htmlwebpackplugin({title: '我打包生成的列表页',template: './src/a.html',favicon: './src/favicon.ico',filename: 'b.html',chunks: [entry的入口键, entry中的入口键]})
]
拷贝文件插件

我们在开发过程中,有些文件是需要拷贝到目标文件夹中的,因为此时只能打包js文件和html文件,css和其他js文件是不能进行打包的,也拷贝不到目标文件夹中 - 静态css,所以将来打包后的html是会运行报错的,此时就需要用到另外一个插件:

npm i copy-webpack-plugin@6.4.1

导入并使用:

const CopyPlugin = require("copy-webpack-plugin");
// 在插件配置中使用
new CopyPlugin({// 插件配置  from从某文件夹复制,可以使用相对路径;to到某文件夹,尽量使用绝对路径,使用相对路径的时候是相对上面设置好的输出目录patterns: [{ "from": "./public/img", "to": path.join(__dirname, "./dist/img/") },{ "from": "./public/css", "to": path.join(__dirname, "./dist/css/") },{ "from": "./public/js", "to": path.join(__dirname, "./dist/js/") },{ "from": "./public/fonts", "to": path.join(__dirname, "./dist/fonts/") }]
}),

解析器

如果在html页面中,引入了css文件、图片等静态资源,打包后的html页面中同样保持引入的关系,但是css文件、图片等静态资源没有被打包到目标文件夹中,导致html文件无法出现正常效果。

要将css文件、图片等静态资源一起打包目标文件夹中,就需要使用解析器来处理。

解析器配置:

module:{ rules: [解析器的配置]
}

不同的静态资源处理需要使用不同的解析器。

css解析

css解析器需要下载两个插件:npm i css-loader style-loader

css-loader插件起到的作用是将入口文件中css进行打包

style-loader插件起到的作用是将打包好的css引入到html中

下载好后不需要导入,但是需要配置:

module: {rules: [{// 匹配到.css的文件后缀就进行处理test: /\.css/,// 使用两个插件进行处理use: ['style-loader', 'css-loader']}]
}

光有这样的配置是不行的,因为webpack默认打包的是入口文件,所有内容都要放在入口文件中导入才能被打包,所以我们需要将静态资源在入口文件中导入:

require('./css/test.css')

这样就可以了。最终打开打包后的html页面,css样式效果能正常展示在浏览器中了。

当我们打开目标文件夹后,发现css文件并没有在目标文件夹中,那是因为默认将css样式打包在出口js文件中了。

在实际项目中,我们还是希望能将css单独放在一个文件中,不希望都放在出口js文件中,这时就需要一个插件来处理了

插件名称:mini-css-extract-plugin

下载:npm i mini-css-extract-plugin

导入:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

配置这个插件:

new MiniCssExtractPlugin({// 生成的文件名filename:'css/[hash].css'
}) 

如果不设置文件名称,最终会默认生成main.css

配置好以后,在解析器中用这个插件替换style-loader插件:

{test: /\.css/,use: [MiniCssExtractPlugin.loader, 'css-loader']
}

此时重新打包就可以在目标文件夹中生成,css文件夹,目标css文件就在css文件中。出口文件中也就没有css的代码了。

sass解析

sass文件需要进行编译,还要被引入到html文件中使用,需要依赖两个插件:npm i sass sass-loader,下载成功后同样不需要导入,只需要配置解析器就好:

{test: '\.scss',use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}

同样的sass文件也要在入口文件被导入才能被解析:

require('./css/test.css')
require('./sass/test.scss')

注意:loader的配置项是按照从有向左的顺序执行的,所以他们的配置有顺序关系,例如,css解析,一定要先style-loader,再css-loader,sass也一样。

ES6转ES5

下载插件:

npm i babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime

配置loader:

{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'],plugins: [['@babel/plugin-transform-runtime']]}}
}
图片解析

需要依赖1个插件:html-loader

下载:npm i html-loader

使用配置:

首先修改导出文件目录:

output: {path: __dirname + '/dest',filename: 'target.js',clean: true,assetModuleFilename: 'img/[name][ext]'
}

然后添加图片解析器:

{test: /\.png$/,type: 'asset/resource' // webpack自带的静态资源处理
},
{test: /\.html$/,loader: 'html-loader'
}

不管是css中引入的图片还是html中引入的图片都可以进行打包了。

服务器配置

如果希望我们的项目运行在一个web服务器中,webpack也有对应的插件让我们可以快速启动一个web服务器,且这个插件还可以让我们的项目自动刷新。

插件名称:webpack-dev-server

下载:npm i webpack-dev-server

这个插件不需要导入,直接使用:

devServer: {static: {directory: path.join(__dirname, 'dest'),}
}

这个web服务器要启动起来要再次执行一个命令:

webpack serve --config peizhi.js --open

后面--open参数是自动打开浏览器的。

其他配置参考网址:https://webpack.js.org/configuration/dev-server/#devserverproxy

项目打包

修改源项目文件,因为webpack打包,是基于入口文件打包的,js文件,还是css文件,最终都会引入在一个入口文件中,html引入这个最终中的js

将原本html中引入的js/css都删掉

配置多入口

打包多个html,分别引入不同的入口。


本博文缺失大量图片,严重影响内容完整性以及阅读体验,完整内容请前往本人菜鸡博客——许小墨のBlog

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

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

相关文章

隋唐洛阳“西宫”:上阳宫的GIS视角

隋唐洛阳城简介 营建 隋大业元年&#xff08;605年&#xff09;&#xff0c;在隋炀帝的授意下&#xff0c;隋代著名城市设计师宇文恺&#xff0c;在汉魏故城以西重新选址&#xff0c;历时8个月&#xff0c;日役劳工200万&#xff0c;兴建新都洛阳城。 城和苑 隋唐洛阳城采用…

eBPF技术介绍

前言 eBPF起源于linux内核&#xff0c;它可以以砂箱程序运行在操作系统内核的特权上下文&#xff0c;高效&#xff0c;安全&#xff0c;易于扩展而不需要修改内核源码或者加载内核模块。 操作系统一直是实现观测&#xff0c;安全和网络功能的最理想的地方&#xff0c;因为内核的…

优思学院|精益管理的理念是什么?

作为一个企业&#xff0c;我们都希望拥有高效率和优异的竞争力。但是&#xff0c;如何才能在竞争激烈的市场中脱颖而出&#xff1f;这时&#xff0c;精益管理理念的出现可以帮助我们。 精益管理的基本概念是什么&#xff1f; 精益管理的核心理念是通过消除浪费来实现生产效率…

Java线程间通信方式(3)

前文了解了线程通信方式中的CountDownLatch&#xff0c; Condition&#xff0c;ReentrantLock以及CyclicBarrier&#xff0c;接下来我们继续了解其他的线程间通信方式。 Phaser Phaser是JDK1.7中引入的一种功能上和CycliBarrier和CountDownLatch相似的同步工具&#xff0c;相…

辛弃疾最经典的10首词

他&#xff0c;文能挥笔填词&#xff0c;武能上马杀敌&#xff1b; 他&#xff0c;被称为“词中之龙”&#xff0c; 他&#xff0c;一生赤子&#xff0c;追求收复山河&#xff1b; 他&#xff0c;是与苏轼齐名的豪放派词人&#xff1b; 他是辛弃疾。 辛弃疾一生怀着赤子之…

IO多路复用——select函数

1.select函数原型和fd_set结构体说明 1.1 select函数原型 ​ 使用 select 这种 IO 多路转接方式需要调用一个同名函数 select&#xff0c;这个函数是跨平台的&#xff0c;Linux、Mac、Windows 都是支持的。程序员通过调用这个函数可以委托内核帮助我们检测若干个文件描述符的…

【MCS-51】51单片机结构原理

至今为止&#xff0c;MCS-51系列单片机有许多种型号的产品&#xff1a;其中又分为普通型51&#xff08;8031、8051、89S51&#xff09;和增强型52&#xff08;8032、8052、89S52等&#xff09;。它们最大的区别在于存储器配置各有差异。下面我举例子的都是8051这一系列的单片机…

STM32-HAL-定时器(无源蜂鸣器的驱动)

文章目录 一、蜂鸣器的介绍二、常用的无源蜂鸣器的电路三、测试准备四、初始化片上外设4.1 初始化定时器4的通道2为PWM输出模式4.2 编写驱动代码4.3 Logic分析仪查看波形4.4 代码分析 一、蜂鸣器的介绍 有源蜂鸣器&#xff1a; 有源蜂鸣器内部有一个发声电路,也就是“源”&…

数据湖Iceberg-Hive集成Iceberg(3)

文章目录 Hive集成Iceberg环境准备Hive与Iceberg的版本对应关系如下上传jar包&#xff0c;拷贝到Hive的auxlib目录中修改hive-site.xml&#xff0c;添加配置项启动 HMS 服务启动 Hadoop 创建和管理 Catalog默认使用 HiveCatalog指定 Catalog 类型使用 HiveCatalog使用 HadoopCa…

C++学习记录——이십 map和set

文章目录 1、setmultiset 2、map3、map::operator[] 1、set vector/list/deque等是序列式容器&#xff0c;map&#xff0c;set是关联式容器。序列式容器的特点就是数据线性存放&#xff0c;而关联式容器的数据并不是线性&#xff0c;数据之间有很强的关系。 它们的底层是平衡…

在当前互联网行情下,Android想转音视频开发,会有前景吗?

前言 近年来&#xff0c;由于三年疫情的影响&#xff0c;很多公司都开始陆陆续续的在裁员&#xff0c;Android开发工作岗位也是&#xff0c;可能有些从事Android开发的朋友还没有意识到&#xff0c;Android开发岗位正在变少&#xff0c;求职者&#xff0c;僧多粥少&#xff0c…

视频大文件传输的演变:从“卷轴男孩”到自动化

200年前&#xff0c;从纽约市到英国伦敦的单程旅行需要乘坐一艘跨大西洋轮船将近三周——如果你能负担得起的话&#xff0c;那就是。那些不能在满是汗水、狭窄的帆船上安顿大约一个半月的人。 今天&#xff0c;视频专业人士能够在几小时甚至几分钟内跨越相同的物理距离传输大量…

《用于估计血压变化的光电体积描记图和心电图的特征》阅读笔记

目录 一、摘要 二、十大问题 Q1论文试图解决什么问题&#xff1f; Q2这是否是一个新的问题&#xff1f; Q3这篇文章要验证一个什么科学假设&#xff1f; Q4有哪些相关研究&#xff1f;如何归类&#xff1f;谁是这一课题在领域内值得关注的研究员&#xff1f; Q5论文中提…

微信小程序第五节——登录那些事儿(超详细的前后端完整流程)

&#x1f4cc; 微信小程序第一节 ——自定义顶部、底部导航栏以及获取胶囊体位置信息。 &#x1f4cc; 微信小程序第二节 —— 自定义组件 &#x1f4cc; 微信小程序第三节 —— 页面跳转的那些事儿 &#x1f4cc; 微信小程序第四节—— 网络请求那些事儿 &#x1f61c;作 …

MFC之CRect详解

2023年4月25日&#xff0c;周二晚上。 今天查了不少关于CRect类及其相关内容的资料&#xff0c;学到了不少东西&#xff0c;所以我决定写一篇详细的关于CRect类及其相关内容的文章&#xff0c;以记录今天所学。 CRect类 在 MFC 中&#xff0c;CRect 类表示一个矩形区域。它是…

linux 命令之 tar -czvf和 tar -xzvf

文章目录 一、概述&#xff1a;二、基础知识 一、概述&#xff1a; tar 用于linux 系统中压缩和解压 二、基础知识 tar常用命令参数说明 tar命令的czvf/xzvf参数分别代表的意义如下&#xff1a; -c 或–create 建立新的备份文件。 -x或–extract或–get 从备份文件中还原文件…

SparkStreaming学习之——无状态与有状态转化、遍历kafka的topic消息、WindowOperations

目录 一、状态转化 二、kafka topic A→SparkStreaming→kafka topic B (一)rdd.foreach与rdd.foreachPartition (二)案例实操1 1.需求&#xff1a; 2.代码实现&#xff1a; 3.运行结果 (三)案例实操2 1.需求&#xff1a; 2.代码实现&#xff1a; 3.运行结果 三、W…

Eclipse代码提示突然失灵的解决方案

不知道改动了啥&#xff0c;突然间Eclipse的代码提示就失效了&#xff0c;发现缺少后极不方便。 使用快捷键&#xff1a;Alt/ 提示 No Default Proposals 为什么使用快捷键&#xff1a;Alt/ 会提示“No Default Proposals。”呢&#xff1f; 网上提示可能是热键冲突 但是一套…

数据可视化大屏电商数据展示平台开发实录(Echarts柱图曲线图、mysql筛选统计语句、时间计算、大数据量统计)

数据可视化大屏电商数据展示平台 一、前言二、项目介绍三、项目展示四、项目经验分享4.1 翻牌器4.1.1 翻牌器-今日实时交易4.1.2.翻牌器后端统计SUM函数的使用 4.2 不同时间指标的数据MySql内部的时间计算 4.3 实时交易播报MySql联表查询和内部遍历循环 4.4 每日交易量4.4.1.近…

5.5 高斯型求积公式简历

学习目标&#xff1a; 我会按照以下步骤学习高斯求积公式简介&#xff1a; 理解积分的概念&#xff1a;学习什么是积分以及积分的几何和物理意义&#xff0c;如面积、质量、电荷等概念。 掌握基本的积分技巧&#xff1a;掌握基本的积分公式和技巧&#xff0c;如换元法、分部积…