位置: 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)(巴伐利亚知乎)

  • 合伙企业如何纳入合并报表
  • 专项扣除子女教育大学生可以吗
  • 企业增资后需要交什么税
  • 无形资产加计扣除最新政策
  • 当月的进项当月可以认证吗
  • 代扣代缴通用缴款书怎么打印
  • 未发货先开票怎么结转成本
  • 新成立的公司银行存款如何入账
  • 事业单位其他收入的会计分录
  • 没超过标准的招待费缴税吗
  • 社保基数与个税缴纳基数一致
  • 无偿赠与钱要交税吗
  • 商铺租金收入税是多少税率
  • 小规模纳税人定额发票累计领用金额
  • 定期定额户需要自己申报吗
  • 所得税的税率有哪几种
  • 企业合并三种方式
  • 原材料盘亏会计分录怎么做
  • 为什么无形资产减值准备一经计提不得转回
  • 私车公用报销怎么算
  • 差额征税的服务费怎么入账
  • 小规模纳税人进项税额怎么算
  • 工资和薪金是一回事吗
  • 本年利润和未分配利润怎么结转
  • win10安全中心通知关闭
  • 如何设置两台路由器连接
  • 未售车位出租有哪些税要缴纳
  • 票据贴现办法
  • 将银行借款存入银行会引起企业资产总额的变化吗
  • 科尼西卡神庙在哪里
  • framework模块
  • vue组件继承element并重写方法
  • 天然气票据
  • thinkphp常用函数
  • 数据库锁面试题
  • 软件企业高新技术产品证明材料
  • 修改公司章程注意事项
  • 增值税申报系统登录密码
  • 一个人失恋了该怎么安慰她
  • 怎么确定应付账款的完整性
  • 增值税专票怎么交税
  • 固定资产补提折旧的账务处理
  • 业务招待费汇算清缴账务处理
  • 房地产企业缴纳契税会计分录
  • 收到的货品与实物不符
  • 银行保函会计处理
  • 衍生工具属于什么科目
  • 增值税其他收益包括哪些
  • 接手前往年的银行余额不平怎么办?
  • sedsvc.exe是什么
  • win10改win8.1
  • bios的含义
  • red hat7.6
  • sesvc.exe是什么
  • cyb2k.exe是安全进程吗 cyb2k进程危险吗
  • window预览
  • centos7打开命令行
  • linux apt apt-get
  • win7系统的电脑
  • win10更新总失败
  • wps linux版本是什么意思
  • javascript全选反选
  • Begin OpenGL with Python-1st Day,draw a simple sample.
  • jquery炫酷效果
  • jquery层级选择器
  • linux 环境 mysql写入中文报错
  • jquery的选择器作用是选中某些元素
  • jquery接收后端数据
  • asynctask优缺点
  • android fragmentactivity
  • js动态创建script标签
  • jquery的dialog
  • python函数详解
  • 税收征收管理与实践
  • 国家税务局总局网址
  • 纳税申报的期限是多少年
  • 一次性收入多少要交个人所得税
  • 广东地方税务局领导班子名单
  • 个人转让住宅需要缴纳什么税
  • 红伞伞儿歌寓意着什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设