webpack我们一起入门吧 -天下标王
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

webpack我们一起入门吧

webpack我们一起入门吧-作为一个webpack小白的我,最近也开始学习了,但是苦于不知道怎么学,最近看了一些讲解webpack的视频还是觉得挺不错的,最起码对于刚入门的我来

作为一个webpack小白的我,最近也开始学习了,但是苦于不知道怎么学,最近看了一些讲解webpack的视频还是觉得挺不错的,最起码对于刚入门的我来说还是觉得学到了不少,下面是最近看视频和文章学习到的一些内容,有问题请多指教哦。

1. webpack作用

webpack的核心功能

打包。

什么是打包

简而言之打包就是将多个文件合并到一个js文件中,也就是说开发完成后合并的过程就是打包。

为什么使用webpack

我们在开发时在html页面都是通过手动引入我们需要的多个文件,如果打包成一个文件,会减少http请求数,能让我们的页面更快的加载和显示。而且webpack还有很多其他的功能,例如开启本地服务器,边写代码边更新,压缩等功能。总之就是给我们带来了很多便利的功能。

2.webpack的常用术语解释

Module

模块,分割的代码单元,webpack 中的模块可以是JS,CSS,LESS,TS,JSX等静态文件,可以说我们手写的一个个的文件都是module,他们是webpack处理文件的单位。

bundle

bundle (输出束),许多不同的模块生成,可以理解成最终的输出文件。

chunk

chunk就是webpack根据文件中的引用关系生成chunk文件。

大概可以理解为:我们手写的文件是module,webpack针对文件中引用处理后的文件是chunk,最终生成的输出文件是bundle。

3 webpack的5个核心概念

入口(entry)

Entry(入口),指示 webpack 应该使用哪个模块(module)作为入口开始打包,并且建立其内部依赖图。入口可以是单入口也可以是多入口。

输出(output)

output指示多个文件合并成一个文件(bundle)以后在哪里输出,怎么命名。

loader

webpack 只能理解 Javascript 和 JSON 文件,这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。

loader的使用步骤是1.下载,2.使用

插件(plugin)

plugin用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量。

plugin的使用步骤是1.下载,2.引入,3.使用

模式(mode)

mode有development(开发模式),production(生产模式),分别提供开发者调试的环境和代码优化上线的环境。

4 webpack初始化

1. 生成package.json

首先创建文件夹webpack-demo文件夹,在webpack-demo目录下执行npm init -y ,生成package.json配置文件

2. 安装webpack webpack-cli

执行npm install webpack webpack-cli --save-dev,执行成功后生成了node-modules文件夹

注:命令行中-g -D -S的区别

-g --global的简写,对模块进行全局安装,-g安装的模块是这台电脑的项目都能用 -D --save-dev 对模块进行局部安装,局部的意思是只针对当前项目,是开发环境用到,生产环境用不到,模块写入到package.json的devDependencies 对象中。

devDependencies对象,是我们开发的时候需要用到的一些包,只用于开发阶段,真正打包上线的时候并不需要这些包,因为这些工具只是你用来打包代码的,是用来识别特定文件以及代码,帮助我们生产最终文件的。

模块安装到项目文件夹下的node_modules文件夹下

-S --save的简写,对模块进行全局安装,不止用于开发环境,也用于生产环境,模块写入到package.json的dependencies 对象中。

dependencies对象,这个与devDependencies不同,是需要发布到生产环境中的,就比如你要跑一个基于vue的项目,所以需要vue.js来支持,vue.js文件就需要跟随项目到最终的生产环境。npm i vue -S即可将Vue模块安装到项目的依赖中,并一同发布到生产环境。

模块安装到项目文件夹下的node_modules文件夹下

3. 创建配置文件

在根目录下创建webpack.config.js

使用该配置文件时执行webpack 命令即可执行打包,但是有个疑问就是配置文件一定要是这个吗,其实不是的,例如我想要使用xxx.js作为配置文件呢?我们可以通过运行命令webpack --config xxx.js来指定配置文件。

5 webpack开发环境配置

开发环境配置需要设置配置文件 mode:'development'

1. 打包css

我们知道webpack只能理解js和json文件,无法直接对css打包,这个时候就需要借助css-loader,css-loader是用来解析css,把css加载到js中。

  • 编写文件

  • 安装css-loader

npm i css-laoder -D

  • 配置css-loader

  • 结果

可以看到index.css已经被引入

2. 打包less

首先less.css要被less-loader加载,转化为css,然后再被css-loader加载到js中

  • 编写文件

  • 安装 less less-loader css-loader

less-loader安装时需要同时安装less npm i less-loader less css-loader -D

  • 配置less-loader css-loader

  • 结果

执行了webpack后报错了,报错内容如下

原因是less-loader安装的版本过高 解决办法是:1.npm uninstall less-loader 2.npm install less-loader@5.0.0

less打包成功。

3. 打包html

打包html需要用到html-webpack-plugin,默认会创建一个空的 HTML,自动引入打包输出的所有资源(JS/CSS),我们也可以自己创建html文件,不需要再html引入文件,使用这个插件后会自动引入

  • 编写文件

  • 下载plugin包

npm install --save-dev html-webpack-plugin

  • 配置文件

  • 结果

执行结果出错,还是因为html-webpack-plugin版本过高,解决办法1.npm uninstall html-webpack-plugin,2.npm install i html-webpack-plugin@4.4.1 -D

最终结果

4. 展示css效果

通过以上步骤mian.js已经被引入到html,但是实际上css并没有生效,也就是说html的样式并没有被改变,因为css其实并没有被应用到html中,这个时候就需要用到style-loader了。style-loader的作用是将css-loader解析的内容挂载到style标签下,并且将style标签加入到html文档中。

  • 编写文件

同上

  • 下载style-loader

npm i style-loader -D

  • 配置文件

  • 结果

可以看到样式已生效。

4. 打包图片资源

图片资源可以在样式中引用,比如说背景图片,也可以直接在html中使用,file-loader或者是url-loader都是可以处理图片资源的,他们的区别就是url-loader可以设置在图片大小低于某个阈值的时候base64处理,这样可以减少请求,但是他们默认都不能处理html中的图片,html中的图片可以通过html-loader引入,从而能被url-loader进行处理。 -编写文件

  • 下载url-loader或者file-loader以及html-loader
  • npm install --save-dev html-loader url-loader file-loader
  • 配置文件

结果 不出意料,又报错了,还是下载版本过高的原因,1.npm uninstall html-loader url-loader file-loader,2.npm install html-loader@0.5.5 url-loader@3.0.0 file-loader@5.0.2 -D

5. 打包其他资源

  • 引入其他文件

  • 配置文件

-结果

6. devServer

devServer只在开发环境中生效,如果需要derServe中的配置生效,需要执行webpack-dev-server命令,并且如果修改了其中的配置需要重新执行命令。

  • devServer.open

在DevServer第一次构建完成时,自动用浏览器打开网页,默认是true

  • devServer.hot

启动 webpack 的模块热替换,在修改源代码后能实时的在浏览器看到更新后的效果

  • devServer.compress

为每个静态文件开启 gzip压缩

  • devServer.contentBase

项目构建后路径

  • devServer.port

指定端口号

  • devServer.proxy

开启代理

6 webpack生产环境配置

生产环境中mode需要配置成production

1.提取 css 成单独文件

需要用到mini-css-extract-plugin,经过css-loader的处理,css文件已经被整合到js中,这个我们需要的是把这些css 提取成一个单独的css文件,ini-css-extract-plugin插件loader的作用就是提取js中的css成单独的文件

  • 编写文件

  • 下载插件

npm install --save-dev mini-css-extract-plugin@0.9.0

注:由于很多下载版本过高,都会导致后面运行webpack报错,后面下载就直接加上版本号

  • 配置文件

  • 结果

2. css 兼容性处理

css 兼容性处理主要是针对css3 的样式,加上前缀操作,我们需要下载postcss-loader postcss-preset-env,然后在package.json中配置browserslist,postcss通过找到package.json中browserslist里面的配置加载指定的css兼容性样式。

  • 编写文件

  • 下载loader

npm install --save-dev postcss-loader postcss-preset-env

  • 配置文件

  • package.json中配置browserslist

              // 开发环境
              //last 1 代表兼容到最后一个版本
              "development": [
                "last 1 chrome version",
                "last 1 firefox version",
                "last 1 safari version"
              ],
              // 生产环境:默认是看生产环境
              "production": [
                ">0.2%",
                "not dead",
                "not op_mini all"
              ]
            }

3. 压缩css

  • 下载

npm install --save-dev optimize-css-assets-webpack-plugin

  • 配置文件

4. js 语法检查

js 语法检查的大概过程是 下载 eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import,下载后配置webpack.config.js配置文件,其中需要注意的是我们只需要对我们手写的js语法检查,node_modules中的js是不需要语法检查的,因此需要排除这个文件夹,另外需要在package.json中配置中 eslintConfig以便按照这个规则来进行语法检查,而我们使用的是airbnb的规范,因此上面还安装了eslint-config-airbnb-base。

  • 下载

npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import

  • 配置文件

  • 配置package.json
"eslintConfig": {
     "extends": "airbnb-base",
      "env": {
         "browser": true 
        }
  }

5. js 压缩

生产环境下只需要设置 mode: 'production',会自动压缩 js 代码

6. html 压缩

html压缩用到的是html-webpack-plugin插件

  • 下载

npm install --save-dev html-webpack-plugin

  • 配置文件

怎么办,周五了,正在写文章的我心早已飞走啦,可是还有好多内容没写啊,不行,我要下班啦,有时间会接着更新哦,看都看了,别忘了给我点个赞哦,谢谢帅哥美女啦哈哈。


推荐阅读
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 本文介绍了如何通过 Maven 依赖引入 SQLiteJDBC 和 HikariCP 包,从而在 Java 应用中高效地连接和操作 SQLite 数据库。文章提供了详细的代码示例,并解释了每个步骤的实现细节。 ... [详细]
  • Explore how Matterverse is redefining the metaverse experience, creating immersive and meaningful virtual environments that foster genuine connections and economic opportunities. ... [详细]
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • andr ... [详细]
  • 本文介绍如何使用Python编写一个简单的爬虫程序,从知乎问题页面抓取美腿图片。环境配置包括Windows 10操作系统,Python语言及其相关库。 ... [详细]
  • Java 中的 BigDecimal pow()方法,示例 ... [详细]
  • 本文详细探讨了Java中的24种设计模式及其应用,并介绍了七大面向对象设计原则。通过创建型、结构型和行为型模式的分类,帮助开发者更好地理解和应用这些模式,提升代码质量和可维护性。 ... [详细]
  • 本文介绍了Java并发库中的阻塞队列(BlockingQueue)及其典型应用场景。通过具体实例,展示了如何利用LinkedBlockingQueue实现线程间高效、安全的数据传递,并结合线程池和原子类优化性能。 ... [详细]
  • 深入解析Spring Cloud Ribbon负载均衡机制
    本文详细介绍了Spring Cloud中的Ribbon组件如何实现服务调用的负载均衡。通过分析其工作原理、源码结构及配置方式,帮助读者理解Ribbon在分布式系统中的重要作用。 ... [详细]
  • 本文深入探讨了 Java 中的 Serializable 接口,解释了其实现机制、用途及注意事项,帮助开发者更好地理解和使用序列化功能。 ... [详细]
  • 本文深入探讨了Linux系统中网卡绑定(bonding)的七种工作模式。网卡绑定技术通过将多个物理网卡组合成一个逻辑网卡,实现网络冗余、带宽聚合和负载均衡,在生产环境中广泛应用。文章详细介绍了每种模式的特点、适用场景及配置方法。 ... [详细]
  • 从 .NET 转 Java 的自学之路:IO 流基础篇
    本文详细介绍了 Java 中的 IO 流,包括字节流和字符流的基本概念及其操作方式。探讨了如何处理不同类型的文件数据,并结合编码机制确保字符数据的正确读写。同时,文中还涵盖了装饰设计模式的应用,以及多种常见的 IO 操作实例。 ... [详细]
author-avatar
红箭777_387
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有
     

相关内容推荐

广州seo软件小白可以做seo优化排名吗深圳seo优化招聘seo综合查询柠檬导航黑帽seo技巧Seo查seo核心技术分析网站seo监测苏州seo网站优化怎么优化网站seoseo的seo工具论坛推广产品创意视频seo如何做seo搜索咸宁工厂seo推广哪家好SEO培训学费随州seo服务seo实战密码 第三版seo如何优化的搜索引擎seo优化怎么做初级seo教程沧州seo网站优化seo需要做哪些工作惠州seo哪家质量好seo推广待遇seo培训机构排名温州seo关键词优化栏目seo标题木子seo好的seo优化系统加盟什么是seo搜索引擎优化运营百度v认证seo优就业seo学院万法seo东莞seo优化排名公司seo综合信息查询seo快速软件找超快排金华seo优化公司蓝狐seo管理系统河北seo关键词排名优化多少钱多合一seo包咸宁网店seo推广公司排名seo 因素南沙区创新seo优化有哪些seo培训班佛山三好SEO武汉seo引擎郑州外包服务郑州seo优化介绍seo 域名解析昆明seo云优化河南神马网站seo推广如何做好seo优化战略呢知站seoseo外包0469zseo推广工程师临沂seo优化经验广西seo优化公司价格宁波关键词seo多少钱SEO城市seo caso韩国邯郸专业seo推广有用吗武汉seo工资黑龙江网络推广seo优化公司淮安seo网站推广马甲包SEO十堰计算机seo推广公司seo 精品课程seo软件学习seo ppcseo网络优化推广是什么睢宁县seo优化公司费用德州seo优化哪家价格实惠百度seo排名点击咸阳外贸seo公司seo黑帽推广纵横seo助手免费领取珠海亚马逊seo曹鹏seo视频教程全解互联网网站seo搜索seo优化托管零距离seo百度推广seo新手怎么找工作引流seo技能培训中心辽宁正规抖音seo优化销售电话seo实验报告百度seo一本通 pdfseo人才招聘信息飞羽seo襄阳市seo关键词优化推广奇奇seo官网seo reikoseo行业术语seo 网站制作seo和竞价的区别针对seo哪里有seo代理加盟项目平台江门seo排名淘宝 seo 教程南岸正规的seo效果好不好seo关键词引流广州市靠谱的seo优化黑帽seo培训班东莞十年seoseo搜索引擎优化排名效果过万个seo外链资源河西区seo优化长沙企业seodiscuz seo优化晋中seo优化市场规模代购行业seo优化运营seo百度快速排名软件面试seo技巧seo营销技术如何搜索引擎seo优化石家庄seo排名有哪些昆明seo哪家好seo有哪些软件seo蜘蛛侠软件智能seo优化精灵seo 目标成都seo培训机构seo55泰州seo排名学淘宝seo淘宝seo排名查询风度seo在线seo伪原创盐山seo整站优化选哪家seo 面试如何优化seo搜索吉安 seo云南seo优化费用广州外贸seo推广seo技术培训机构自学seo推广seo优化花钱南平搜索引擎seo公司seo7799坪山seo优化关键词费用黑帽seo云啸天光年seo论坛泰州seo网站推广刷seo快速排名seo网站外链seo视频教程打包下载清原优化seoSEO优化工程师需要什么学历惠州seo排名seo述职报告连江公司seo技术关键词seo优化方法如何选择seo关键词seo外包公司费用seo学习培训机构分类淘宝 seo 软件seo html标签seo 蜘蛛南沙区创新seo优化有哪些广州seo学徒无锡短视频seo系统江苏seo优化行业费用提升关键字排行seo软件沈阳seo排名效果好html seo 优化东莞seo网站排名seo研究中心视频教程丝瓜seo3150栾城区媒体seo技术售后服务seo手机关键字排行榜公司睢宁seo哪家好上海seo排名优化哪里有郑州seo教学seo做前端开发seoseo都做什么随州产品seo推广怎么做seo a titleseo report对独立站的页面进行SEO优化摩凡seoseo查询软件南京seo技术seo优化优化速稳seo百度seo推广工具夸克seo遇见seoseo方向标seo优化初级教程seo公司三水软件seo优化陈年seo分析seo没落了seo好学习吗找seo合作SEO的简史黑帽seo 论坛seo优化数据报告seo三人行论坛网址巴中seo网络推广有哪些平台chae min seo

合作伙伴

天下标王

龙岗网络公司
深圳网站优化
龙岗网站建设
坪山网站建设
百度标王推广
天下网标王
SEO优化按天计费
SEO按天计费系统