位置: IT常识 - 正文

webpack--》webpack底层深入讲解,从初识到精通,真正实现从0到1的过程

编辑:rootadmin
webpack--》webpack底层深入讲解,从初识到精通,真正实现从0到1的过程

推荐整理分享webpack--》webpack底层深入讲解,从初识到精通,真正实现从0到1的过程,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

目录

webpack

webpack的基本使用

安装

配置

修改自定义打包的入口与出口

优化js或图片的存放路径

配置webpack中@符号的使用

webpack中相关插件安装

webpack-dev-server

html-webpack-plugin

clean-webpack-plugin

webpack中的loader

打包处理css文件

打包处理less文件

打包处理样式表中与url路径相关的文件

打包处理js文件中的高级语法

webpack的打包与发布

配置build命令

Source Map


webpack

webpack是前端项目工程化的具体解决方案。其主要功能为:它提供了友好的前端模块化开发支持,以及代码压缩混淆,处理浏览器端JavaScript的兼容性、性能优化等强大的功能。

前端工程化:在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。企业级中的 Vue 和 React 项目,都是基于工程化的方式进行开发,其好处为:前端开发自成体系,有一套标准的开发方案和流程。

webpack的基本使用安装

要想使用webpack,肯定是要先安装了,在终端运行如下命令,安装webpack相关的两个包:

这里我直接默认下载最新版本,后期如果出现版本问题,在指定相关版本的修改即可。

npm i webpack webpack-cli -D

下载完成之后就会出现在 package.json 的文件里面,显示的版本信息如下:

配置

在项目根目录中,创建 webpack.config.js 的webpack配置文件,并初始化如下配置:

如下两种模式讲解一下:

开发时候使用development,因为追求的是打包速度,而不是体积

发布上线的时候使用production,因为上线追求的是体积小,而不是打包速度快

// 使用 node.js 语法向外导出一个 webpack 的配置对象module.exports = { // 代表webpack运行模式,可选值:开发模式(development)和生产模式(production) mode:'development'}

在package.json的scripts节点下,新增 dev 脚本如下:

script 节点下的脚本,可通过 npm run 执行,如: npm run dev

在终端运行 npm run dev 命令,启动 webpack 进行项目的打包构建。 执行命令后,当前根目录就会出现一个 dist 名字的文件夹,里面有 main.js 将html页面引入的js文件换成main.js即可。

webpack.config.js文件的作用:

webpack.config.js是webpack的配置文件,webpack在真正开始打包构建之前,会先读取这个配置文件,从而基于给定的配置对项目进行打包。注意:由于webpack是基于node.js开发出来的打包工具,因此在它的配置文件中,支持使用node.js相关的语法和模块进行webpack的个性化配置。

webpack中的默认约定:

在webpack 4.x 和 5.x 的版本中,有如下的默认约定:

默认的打包入口文件为 src -> index.js

默认的输出文件路径为 dist -> main.js

注意:可以在 webpack.config.js 中修改打包的默认约定

修改自定义打包的入口与出口

根据上文webpack是有默认打包的入口与出口路径文件的,如果想修改的话,看如下操作:

在 webpack.config.js 配置文件中,通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口,当然这些参数也是修改我们自己进行配置的,如下:

// 导入路径模块const path = require('path')// 使用 node.js 语法向外导出一个 webpack 的配置对象module.exports = { // 代表webpack运行模式,可选值:开发模式(development)和生产模式(production) mode:'development', // entry:'指定要处理的文件路径' entry:path.join(__dirname,'./src/index_test.js'), // output:指定生成的文件要存放到哪里 output:{ // 存放目录 path:path.join(__dirname,'dist'), // 存放生成的文件名 filename:'main_test.js' }}

优化js或图片的存放路径

根据上文的介绍的自定义打包的入口和出口,我们可以把js文件统一放在生成的文件名里面便于管理,如下:

在进行优化图片路径时,这个先忽略,看完下文的loader配置在看这个地方:

配置webpack中@符号的使用

在我们在index.js文件中进行导入外部文件,通过需要 ../../../ 的形式从里向外导入,属实有点麻烦,所以我们进行配置一个 @符号 规定 @符号就是在 src 目录下开始的,这样我们在进行导入的时候就不是从里往外而是从外往里了,比较的方便,配置过程如下:

// 使用 node.js 语法向外导出一个 webpack 的配置对象module.exports = { resolve:{ alias:{ // 告诉webpack,程序员写的代码中,@符号表示 src 这一层目录 '@':path.join(__dirname,'./src/') } }}webpack中相关插件安装

我们在进行webpack打包时,为了提高代码的打包更新提交速率,也是需要借助一些插件的使用,通过安装和配置第三方的插件,可以拓展 webpack 的能力,从而让 webpack 用起来更方便。最常用的webpack插件有如下几个:

webpack-dev-server

类似于 node.js 阶段用到的 nodemon 工具,每当修改了源代码,webpack会自动进行项目的打包和构建,会启动一个实时打包的 http 服务器。

运行如下命令,即可在项目中安装此插件:(不指定版本号,默认下载最新版本)

npm i webpack-dev-server -D

接下里进行 webpack-dev-server 插件配置:

修改 package.json -> scripts 中的 dev 命令,如下:写上webpack-dev-server 即可。再次运行 npm run dev 命令,重新进行项目打包。

当我们打包完成,如果像往常一样,右键vscode的 Open with Live Server 打开网站是没有任何作用的,需要 Ctrl + 点击 打包出现的网址,如下:

打开网站仍然没有任何变化,原因如下:

原来webpack-dev-server 打包好的main.js是托管到内存中,并不会显示到物理磁盘中,所以在项目根目录中看不到;但是,我们可以认为,在项目根目录中,有一个看不见的main.js,所以我们应该把html文件中的main.js修改为如下路径:

修改完成之后我们访问控制台上  http://localhost:8081/  网址,点击src文件夹就能看到我们实时更新的index.html网站了。

webpack--》webpack底层深入讲解,从初识到精通,真正实现从0到1的过程

注意!!!:

如果你是第一次使用webpack的话,安装这个webpack-dev-server插件可能会出现许多问题,推荐看一下我之前在 React 中对webpack的讲解,里面详细介绍了初学者使用webpack出现的一系列问题:点击右边网站 —> webpack-dev-server出现的一系列问题讲解

html-webpack-plugin

通常我们所知,内存和物理磁盘相比,内存的运转速度是最快的,处于性能的考虑,devserver把打包好的文件放到内存当中去托管也就是上文我们讲到的mian.js这个文件,现在我们要把首页index.html也托管到内存当中去,这时就要借助我们现在讲的这个插件了。

执行如下命令进行安装插件:(默认安装最新版本)

npm i html-webpack-plugin -D

安装完成之后就开始在webpack.config.js文件中对该配件进行相关配置:

// 导入路径模块const path = require('path')// 导入插件const HtmlWebPackPlugin = require('html-webpack-plugin') //导入在内存中自动生成index.html页面的插件// 创建html-webpack-plugin插件的实例const htmlPlugin = new HtmlWebPackPlugin({ //插件能力:自动把打包好的main.js追加到我们的页面当中去 template:path.join(__dirname,'./src/index.html'),//源文件 __dirname:当前这个文件所处的内存目录 filename:'index.html' //生成在内存中首页的名称})// 使用 node.js 语法向外导出一个 webpack 的配置对象module.exports = { // 代表webpack运行模式,可选值:开发模式(development)和生产模式(production) mode:'development', // entry:'指定要处理的文件路径' entry:path.join(__dirname,'./src/index.js'), // output:指定生成的文件要存放到哪里 output:{ // 存放目录 path:path.join(__dirname,'dist'), // 存放生成的文件名 filename:'main.js' }, devServer: { static: "./", }, //将插件引入到模块当中去 plugins:[ htmlPlugin ]}

配置完成之后,我们在终端打开本地链接打开网站就不需要在进行点击src文件进入了,而是直接进入。右键点击查看网页源代码,如下:

可以看出源代码多出一个main.js,html-webpack-plugin这个插件有个能力,能自动把打包好的main.js追加到我们的页面当中去。所以说有了我们就不需要再引入main.js了,插件会自动处理这个问题。所以注释掉即可,不会影响页面运行。

那么可不可以当我们在终端运行了 npm run dev 的时候就能自动帮我们打开页面呢,答案是可以的,在webpack.config.js 配置文件中,可以通过devServer节点对webpack-dev-server插件进行更多的配置,案例如下:

如果有杀软的朋友,在第一次执行此操作会有杀软的弹框提示,点击允许即可。

我的React文章对webpack中这个插件也有讲解,大家可以相互看一下:React中的插件讲解

clean-webpack-plugin

为了在每次打包发布时自动清理掉dist目录中的旧文件,可以安装配置这个插件,能帮助我们自动清理dist目录下的旧文件。

终端执行以下命令进行安装插件:(默认安装最新版本)

npm i clean-webpack-plugin -D

安装完成之后,我们需要在webpack.config.js文件中进行相关配置:

//在webpack.config.js文件中//导入模块const {CleanWebpackPlugin} = require('clean-webpack-plugin')// 使用 node.js 语法向外导出一个 webpack 的配置对象module.exports = { //将插件引入到模块当中去 plugins:[ new CleanWebpackPlugin(), ]}

配置完成后,下次再重新编译打包时,会自动删除dist中的旧文件,再重新生成。

webpack中的loader

在实际开发过程中,webpack默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块,webpack默认处理不了,需要调用 loader 加载器才可以正常打包,否则会报错!

loader加载器的作用:协助webpack打包处理特定的文件模块。比如:

css-loader:可以打包处理 .css 相关的文件

less-loader:可以打包处理 .less 相关的文件

babel-loader:可以打包处理webpack无法处理的高级JS语法

打包处理css文件

终端执行以下命令,安装处理css文件的loader:(默认安装最新版本)

npm i style-loader css-loader -D

在webpack.config.js的module -> rules 数组中,添加 loader 规则如下:

其中:test表示匹配的文件类型;use表示对应要调用的loader。注意:use数组中指定的loader顺序是固定的;多个loader的调用顺序是:从后往前调用。

module.exports = { // 所有第三方文件模块的匹配规则 module:{ rules:[// 文件后缀名的匹配规则 {test:/\.css$/,use:['style-loader','css-loader']} ], },}

原理:webpack把index.css这个文件,先转交给最后一个loader进行处理(先转交给css-loader),当css-loader处理完之后,会把处理的结果,转交给下一个loader(转交给style-loader),当style-loader处理完毕之后,发现没有下一个loader了,于是把处理的结果转交给了webpack,webpack把style-loader处理的结果,合并到 /dist/index.js 中,最终生成打包好的文件。

所以接下里我们在源文件,即index.js中导入css模块,如下图所示:

导入之后,不需要再index.html文件中引入css文件了,直接再css文件中书写样式,打包之后,我们想要的样式即会出现在页面上。

打包处理less文件

终端执行以下命令,安装处理less文件的loader:(默认安装最新版本)

npm i less-loader less -D

在webpack.config.js的module -> rules 数组中,添加loader规则如下:

module.exports = { // 所有第三方文件模块的匹配规则 module:{ rules:[// 文件后缀名的匹配规则 {test:/\.less$/,use:['style-loader','css-loader','less-loader']} ], },}

所以接下里我们在源文件,即index.js中导入less模块,如下图所示:

导入之后,不需要在index.html文件中引入less文件了,直接再less文件中书写样式,打包之后,我们想要的样式即会出现在页面上。 

打包处理样式表中与url路径相关的文件

在终端执行以下命令,安装处理图片文件的loader:(默认安装最新版本)

npm i url-loader file-loader -D

在webpack.config.js的module -> rules 数组中,添加 loader 规则如下:

其中 ? 之后的是loader参数项,limit用来指定图片的大小,单位是字节(byte),只有<=limit 的大小的图片,才会被转为 base64 格式的图片。

module.exports = { // 所有第三方文件模块的匹配规则 module:{ rules:[// 文件后缀名的匹配规则 {test:/\.jpg|png|gif$/,use:'url-loader?limit=22229'} ], },}

所以接下里我们在源文件,即index.js中导入图片模块,并给其动态赋值如下图所示: 

打包处理js文件中的高级语法

webpack只能打包处理一部分高级的JS语法,对于那些webpack无法处理的高级js语法,需要借助于babel-loader进行打包处理。如下的高级语法,webpack是无法识别的,需要下载相关loader处理。

// 定义装饰器函数function info(target){ target.info = 'People info'}// 定义一个普通的类@infoclass Person{}console.log(Person.info);

安装 babel-loader 相关包:

在终端执行以下命令,下载相关依赖的包:(默认下载最新版本)

npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D

在webpack.config.js的module -> rules 数组中。添加 loader 规则如下:

module.exports = { // 所有第三方文件模块的匹配规则 module:{ rules:[// 文件后缀名的匹配规则 //在配置babel-loader的时候,程序员只需要把自己的代码进行转换即可,一定要排除node_modules目录中的js文件 {test:/\.js$/,use:'babel-loader',exclude:/node_modules/} ], },}

配置 babel-loader

在项目根目录中,创建名为 babel.config.js 配置文件,定义 Babel 的配置项如下:

module.exports = { //
本文链接地址:https://www.jiuchutong.com/zhishi/290200.html 转载请保留说明!

上一篇:Vue2 跨域问题报错AxiosError net::ERR_FAILED、 Network Error、ERR_NETWORK(vue2.0解决跨域问题)

下一篇:巴伐利亚阿尔卑斯山脉中的米滕瓦尔德小屋,德国 (© Sebastian Frölich/Offset by Shutterstock)(巴伐利亚知乎)

  • ps平滑工具在哪里(ps中的平滑工具失灵了怎么办)

    ps平滑工具在哪里(ps中的平滑工具失灵了怎么办)

  • 买家可以通过哪些方式找到想要购买的商品(买家可以通过哪些渠道)

    买家可以通过哪些方式找到想要购买的商品(买家可以通过哪些渠道)

  • 苹果可以更新13.4.1系统吗(苹果可以更新16.5吗)

    苹果可以更新13.4.1系统吗(苹果可以更新16.5吗)

  • 苹果相册权限无法打开(苹果手机相册权限突然不好用)

    苹果相册权限无法打开(苹果手机相册权限突然不好用)

  • 美团共享单车怎么关锁(美团共享单车怎么用)

    美团共享单车怎么关锁(美团共享单车怎么用)

  • cdytn00是什么型号(cdy—an00是什么型号)

    cdytn00是什么型号(cdy—an00是什么型号)

  • 电脑图片放大按什么键(电脑图片放大按右键吗)

    电脑图片放大按什么键(电脑图片放大按右键吗)

  • 华为matepadpro全网通和wifi有什么区别(华为matepadpro全网通)

    华为matepadpro全网通和wifi有什么区别(华为matepadpro全网通)

  • 以前的聊天记录删除了能找回吗(以前的聊天记录换手机了还能恢复吗)

    以前的聊天记录删除了能找回吗(以前的聊天记录换手机了还能恢复吗)

  • 拨号上网和自动获取ip有什么区别(拨号上网和自动获取ip哪个更好)

    拨号上网和自动获取ip有什么区别(拨号上网和自动获取ip哪个更好)

  • 硬件系统有什么作用(硬件系统有什么用)

    硬件系统有什么作用(硬件系统有什么用)

  • iphone8能不能分屏(iphone 8 能分屏吗)

    iphone8能不能分屏(iphone 8 能分屏吗)

  • ipad激活从icloud恢复要多久(ipad激活从icloud恢复很慢)

    ipad激活从icloud恢复要多久(ipad激活从icloud恢复很慢)

  • ipad2018出厂自带贴膜吗(ipad2018出厂系统版本)

    ipad2018出厂自带贴膜吗(ipad2018出厂系统版本)

  • 小米和云米什么关系(小米的和云米的产品哪个质量好点)

    小米和云米什么关系(小米的和云米的产品哪个质量好点)

  • qq没开设备锁为什么还要验证(qq设备锁没开为什么还要验证登录)

    qq没开设备锁为什么还要验证(qq设备锁没开为什么还要验证登录)

  • 苹果7是几寸的机身(苹果手机6.7寸有多大)

    苹果7是几寸的机身(苹果手机6.7寸有多大)

  • 苹果手机怎么关闭深夜模式(苹果手机怎么关闭5g开关)

    苹果手机怎么关闭深夜模式(苹果手机怎么关闭5g开关)

  • 手机信号e是什么意思(手机信号e是什么意思怎么办)

    手机信号e是什么意思(手机信号e是什么意思怎么办)

  • iphonexr可以用ipad充电器充电吗(iphonexr能用iphone12的手机壳吗)

    iphonexr可以用ipad充电器充电吗(iphonexr能用iphone12的手机壳吗)

  • qq标志有哪些(qq所有标识大全)

    qq标志有哪些(qq所有标识大全)

  • qq打卡有什么用吗(qq上的打卡有什么作用)

    qq打卡有什么用吗(qq上的打卡有什么作用)

  • 怎么看是不是国行(怎么看是不是国服英雄)

    怎么看是不是国行(怎么看是不是国服英雄)

  • 怎么让时间显示在屏幕(怎么让时间显示在照片上)

    怎么让时间显示在屏幕(怎么让时间显示在照片上)

  • 电脑插入U盘后蓝屏怎么办?解决方法(电脑插上u盘)

    电脑插入U盘后蓝屏怎么办?解决方法(电脑插上u盘)

  • 布拉索夫中央广场的圣诞市集,罗马尼亚 (© Alpineguide/Alamy)(布拉索夫地图)

    布拉索夫中央广场的圣诞市集,罗马尼亚 (© Alpineguide/Alamy)(布拉索夫地图)

  • 网络游戏架构的前世今生——网关(游戏的系统架构)

    网络游戏架构的前世今生——网关(游戏的系统架构)

  • ps渐变透明效果怎么做(ps渐变透明效果怎么弄)

    ps渐变透明效果怎么做(ps渐变透明效果怎么弄)

  • 税控系统怎么登录
  • 发票冲红重开,重开时是按新税率还是旧税率
  • 土地款发票是否可以抵扣
  • 小微企业减免所得税额是怎么算出来的
  • 通行费进项抵扣政策
  • 公司出租非自有房产
  • 金银首饰在哪个平台买比较好
  • 销售开红字的账务处理
  • 个税生产经营申报流程
  • 公司成立前购买的设备算个人还是公司
  • 内部企业借款利息在建工程资本化
  • 小规模商业企业税率
  • 暂估入库的材料需要做T型账户嘛?
  • 需要预缴增值税
  • 污泥处置中心所得税优惠政策
  • 武汉房产税多少
  • 做内账有风险还是做外账有风险
  • 关注!这两种情况下可免征增值税!
  • 浅谈收入与成本的关系
  • 个税什么情况可以不用汇算
  • 小规模纳税人增值税优惠政策2023
  • 存货账实不符的税务风险
  • 税控盘服务费申报是在哪里填写
  • 超出经营范围开发票
  • win10隐藏功能大全
  • win7系统右键菜单太多怎么办
  • 新买的电脑如何激活windows
  • 债务重组法律服务方案
  • css合并为单一边框
  • php延迟2秒执行
  • 发财树的养殖方法和浇水视频
  • php excel导入数据
  • 汉字转拚音
  • php环境搭建教程
  • 微信公众号开发php源码
  • cssborder虚线边框
  • 印花税的相关问题
  • 零申报的申报表怎么填
  • 建筑业如何开票
  • 公司名下商品房过户给公司需要交过户费
  • phpcms api
  • day14-HTTP01
  • mysql是自动提交的吗
  • 认缴制和实缴制的时间
  • 电子税务局怎么注册
  • 2021新旧会计准则的比较分析
  • 金蝶利润表没有信用减值损失
  • 销售并提供安装服务怎么开票
  • 处置子公司如何纳税
  • access中文版
  • 汇兑损益方式为外币结清怎么操作
  • 4s店送的赠品怎么样
  • 存货过期处理怎么做分录
  • 报表其他应收款包括哪些内容
  • 全资子公司的账户是什么
  • 企业会计制度对固定资产无入账价值怎么入账
  • 一般纳税人月底进项税销项税怎么做分录
  • 首次计提坏账准备应计入
  • sql注入修补方法
  • windows常用功能
  • freebsd使用手册
  • lsass.exe
  • windows8.1 preview
  • 安装完xp系统直接黑屏怎么办
  • win8使用技巧 图文
  • 远程调试linux
  • bootstrap启动类
  • nodejs静态编译
  • css隐藏显示元素的方法
  • UNITY开发工程师
  • div display inline-block
  • 女鬼照片
  • vue.js作用
  • 安卓handler使用
  • python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
  • 从零开始的基础篇
  • js实现跨域访问的几种方式
  • 广东税务查询系统
  • 深圳全电子发票开具流程
  • 累计计税金额是怎么得出
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设