正式学习react(二)[通俗易懂]

正式学习react(二)

大家好,又见面了,我是全栈君。

 

 

 

今天把上一篇还没学习完的 webpack部分学习完:

之前有说过关于css的webpack使用。我们讲了 

ExtractTextPlugin 来单独管理css

讲了module.loaders下关于 css的写法:
module: {
  
  
loaders: [
// Extract CSS during build
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css'),
include: paths
}
]
},

还讲了关于css?modules这个query 的作用,下面我们开始要用到Babel and babel-loader 来支持es6了!
默认大家都熟悉下面几种模块管理方式:

CommonJS

正式学习react(二)[通俗易懂]

ES6

正式学习react(二)[通俗易懂]

 

 

AMD

 正式学习react(二)[通俗易懂]

正式学习react(二)[通俗易懂]

 

 

 上面所有的格式规范,webpack都支持.

————————————————————————————————————–

 现在讲一下loader的定义:

 

正式学习react(二)[通俗易懂]

loader (接收 字符串)

loaders  (接收 数组) 

 

上面的都是数组,所以都写的是loaders.

 

 

 webpack的loader 是讲顺序的,一定记住是从右往左,从右往左,从右往左。重要的事情说三遍!

 

loaders: ['style', 'css'] 就相对于 style(css(input)) ,两者没有差别。

—————————————————————————————————————————

说完顺序,再说参数,还记得之前说的modules吗?

 

Passing Parameters to a Loader

{ test: /\.jsx?$/,

   loaders: [ ‘babel?cacheDirectory,presets[]=react,presets[]=es2015’ ],

   include: PATHS.app

}

我们之前都是这样写的,但是这样阅读性比较差,我们推荐这样的写法:

 

{ test: /\.jsx?$/,

   loader: ‘babel’,

   query: { cacheDirectory: true,

                presets: [‘react’, ‘es2015’] },

   include: PATHS.app

}

 

 

还有,我之前也推荐过 用include:这个key, 他接受string 也可以接收Array;

————————————————————————————————————————————————————–

我之前介绍过ExtractTextPlugin 这个插件,来讲css文件 output 到你的build里。

—————————————————————————————————————————————————————

Loading CSS

  It parses the styles in the given include path (accepts an array too) while making sure only files ending with .css are matched.

The definition then applies both style-loader and css-loader on it:

大意就是说 你写了include,在你的module.loaders下。那webpack就只从这个文件下找.css 结尾的文件,匹配到就用style-loader 和 css-loader 来操作这些css文件。

 

正式学习react(二)[通俗易懂]

 整个过程就是Webpack会判断这些文件,然后在匹配到的文件里将 @import 和 url()声明的字段,转化成require字段,然后就是用到style-loader了,

 下面我们还会介绍 file-loader or url-loader.

 

PS:如果你想确保CSS也能运用sourcemaps 。你可以使用[‘style’, ‘css?sourceMap’]

并且设置output.publicPath为绝对路径。

 

当然,我们可能在项目里用了less,sass。

 less-loader

 

  正式学习react(二)[通俗易懂]

 

 node-sass 

正式学习react(二)[通俗易懂]

 

你们的 LESS/SASS文件里可以使用import:

正式学习react(二)[通俗易懂]

 

也可以直接从node_modules文件夹里加载

 正式学习react(二)[通俗易懂]

还有一些自己去了解。

 —————————————————————————————————

导致我们的项目变慢,很可能是因为我们需要加载很多小资源。毕竟每个请求附带了一个开销。

HTTP / 2将帮助在这方面和改变现状。

 

Webpack 是允许在你的代码里内联加载资源的,不过要使用url-loader这个加载器。他会把图片

翻译成BASE64在你的JavaScript bundles。

 ———————————————————————————————–

Setting Up url-loader

做开发的时候,我们使用url-loader 是不错的选择。因为你可能并不关心生成包的大小。

它有一个限制选项,在达到一定的限制条件以后被使用(延迟image到file-loader)。


具体的说就是,url-loader 是将一些url()里需要下载的资源,下载下来!然后用BASE64编码

内联到我们bundles的js文件里。可以减少开销。但是如果文件太大,我们可能等不了。

我们就让他在浏览器里加载。这就是limit的作用。

正式学习react(二)[通俗易懂]

就这样小于25k的图片将直接以base64的形式内联在代码中,可以减少一次http请求。

 style.js

正式学习react(二)[通俗易懂]

 

webpack.config.js

正式学习react(二)[通俗易懂]

 

 

运行webpack后:

正式学习react(二)[通俗易懂]

 

 

—————————————————————————–

Setting Up file-loader

url-loader是对file-loader的上层封装,如果你忽略内联url,我们可以直接使用 file-loader

正式学习react(二)[通俗易懂]

 

The following setup customizes the resulting filename. By default file-loaderreturns the MD5 hash of the file’s contents with the original extension:

开发者可以根据自己的需求自己定制文件名,默认 file-loader 会返回一个内容是MD5散列的原始扩展文件。

不过这里我自己定义了文件名,打包处理后:

正式学习react(二)[通俗易懂]

 

关于打包 svg , 压缩图片等loader,大家有兴趣自己去了解。

 ———————————————————————————————————————————————————————-

 我们的website也经常需要用到各种字体:最后介绍一下字体的打包:

依靠file-loader或者url-loader 都可以实现字体打包,最简单的方式:

正式学习react(二)[通俗易懂]

 

 想弄的好一点:

正式学习react(二)[通俗易懂]

 

 

 有时候为了权衡网站的性能与美观,我们可能会放弃内联方式【增加request】,直接选择打包,而且打包好多种字体样式:

正式学习react(二)[通俗易懂]

 

 

—————————————————————————————到此为止,webpack基本内容介绍,最后一篇会介绍webpack一下原理——————————-

 

转载于:https://www.cnblogs.com/huenchao/p/6074888.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/108773.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • springcloud与dubbo深入对比

    springcloud与dubbo深入对比微服务架构是互联网很热门的话题,是互联网技术发展的必然结果。它提倡将单一应用程序划分成一组小的服务,服务之间互相协调、互相配合,为用户提供最终价值。虽然微服务架构没有公认的技术标准和规范或者草案,但业界已经有一些很有影响力的开源微服务架构框架提供了微服务的关键思路,例如Dubbo和SpringCloud。各大互联网公司也有自研的微服务框架,但其模式都与这二者相差不大。微服务主要的优势降低复…

  • 关于vueThink框架打包发布的一些问题

    关于vueThink框架打包发布的一些问题

    2021年10月11日
  • Jenkins 安装及使用 ( Jenkins 部署 Maven 项目、Jenkins 部署 Vue 项目)

    Jenkins 安装及使用 ( Jenkins 部署 Maven 项目、Jenkins 部署 Vue 项目)Jenkins安装部署及使用。包括Jenkins部署Vue项目,Jenkins部署Maven项目。

  • 9-ICMP报文种类「建议收藏」

    9-ICMP报文种类「建议收藏」1.ICMP报文种类  ICMP报文的种类分为两种:一种是差错报告报文,另一种是查询报文。  对于差错报告报文来说,ICMP总是把差错报文报告给发送数据源端(源主机)。比如:主机A给主机发送一个数据,结果这个数据在网络传输过程中出错了,然后ICMP协议的机制就会返回一个差错报告给主机A(相当于把数据在传输过程中出错的信息发回给主机A)。2.差错报告报文差错报告报文常见有以下…

  • xcopy-参数详解

    xcopy-参数详解XCOPY——目录复制命令 1.功能:复制指定的目录和目录下的所有文件连同目录结构。 2.类型:外部命令 3.格式:XCOPY[源盘:]〈源路径名〉[目标盘符:][目标

  • RuntimeException和Exception区别

    RuntimeException和Exception区别1.java将所有的错误封装为一个对象,其根本父类为Throwable,Throwable有两个子类:Error和Exception。2.Error是Throwable的子类,用于指示合理的应用程序不应该试图捕获的严重问题。大多数这样的错误都是异常条件。虽然ThreadDeath错误是一个“正规”的条件,但它也是Error的子类,因为大多数应用程序都不应该试图捕获它。在执行该方…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号