webpack - 资源解析（三）

kim__jin
263 阅读3分钟

解析ES6

webpack 原生是支持js的解析，但是对于一些ES6的语法，原生的webpack并不能很好的支持，这个时候我们需要借助babel-loader,使用babel 需要babel的配置文件，文件名称是.babelrc,所以我们需要在webpack.config.js和.babelrc文件中进行配置。

对于babel 有两个概念比较重要，分别是：preset和plugins。

plugins: 可以理解成一个plugins对应的是一个功能。

preset： 是一系列的 babel plugins 的集合。

👇 下面了解一下，babel是如何支持es6的解析

安装babel相关

 npm i @babel/core @babel/preset-env babel-loader -D

安装成功.png

进行配置

  • 创建.babelrc 文件

创建babelrc文件.png

  • 修改配置文件

webpack.config.js 文件：

  • test匹配的正则用来表达哪些文件满足描述
  • use 标示使用的是哪一个loader

image.png

查看效果

执行命令

 rm -rf dist
 npm run build

image.png

解析 React JSX语法

部署环境

 npm i react react-dom @babel/preset-react -D

进行配置

在babelrc 文件中增加关于react的配置

image.png

然后我们修改一下文件中的search文件：

image.png

修改的search的文件的内容为：

"use strict";

import React from "react";
import ReactDOM from "react";

const Search = () => {
  return <div>Search Text</div>;
};

export default Search;

ReactDOM.render(<Search />, document.getElementById("root"));

然后重新进行打包：

 rm -rf dist
 npm run build

打包成功.png

查看效果

在dist的目录中增加search.html 文档

image.png

文档的内容是：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./search.js" type="text/javascript"></script>
  </body>
</html>

效果：

image.png

解析CSS

这个时候我们使用的loader 是css-loader和style-lodaer。

css-loader :用于加载.css文件，并且转换成commonjs对象。

style-loader :将样式通过<style>标签插入到head 中

部署环境

npm i style-loader css-loader -D

进行配置

在webpack.config.js 文件中增加 css-loader,style-loader 的配置

ps： style-loader 一定要放在css-loader 之前，对于多个loader，webpack 会对其进行链式调用，将style-loader的调用结果传递给下一个loader。

image.png

查看效果

image.png

在search.js 文件中进行如下的修改：

"use strict";

import React from "react";
import ReactDOM from "react-dom";

import "./search.css";

const Search = () => {
  return <div className="search-text">Search Text</div>;
};

export default Search;

ReactDOM.render(<Search />, document.getElementById("root"));

对于新增加的search.css 文件进行如下的修改：

.search-text {
  color: red;
}

执行：

 npm run build

最终的执行结果如下：

image.png

解析Less和Sass

以less为例子，sass是相同的原理。

less-loader： 作用即使将less转换成css。

部署环境

npm i less less-loader -D

进行配置

image.png

查看效果

在search.js 文件中进行如下的修改引入的样式路径：

"use strict";

import React from "react";
import ReactDOM from "react-dom";

import "./search.less";

const Search = () => {
  return <div className="search-text">Search Text</div>;
};

export default Search;

ReactDOM.render(<Search />, document.getElementById("root"));

将之前的search.css 文件修改成search.less 文件

.search-text {
  color: red;
}

执行：

 npm run build

最终的执行结果如下：

image.png

解析图片

这个时候我们使用的loader 是file-loader，用来处理文件

部署环境

npm i file-loader  -D

进行配置

在webpack.config.js 文件中增加 file-loader 的配置

image.png

查看效果

image.png

在search.js 文件中引入图片，进行打包：

"use strict";

import React from "react";
import ReactDOM from "react-dom";
import logo from "./images/test.png";

import "./search.less";

const Search = () => {
  return (
    <div className="search-text">
      <img src={logo} />
    </div>
  );
};

export default Search;

ReactDOM.render(<Search />, document.getElementById("root"));

执行：

 npm run build

构建出来的目录如下：

image.png

最终的执行结果如下：

image.png

解析字体

解析字体也是使用file-loader

进行配置

image.png

查看效果

image.png

在less文件中 增加定义并引入

@font-face {
  font-family: "SourceHanSerifSC-Heavy";
  src: url("./image/SourceHanSerifSC-Heavy.otf") format("truetype");
}

.search-text {
  color: red;
  font-family: "SourceHanSerifSC-Heavy";
}

url-loader 解析图片和字体

其实对于图片解析和字体解析 我们也还是有一些其他的办法的，那就是使用url-loader。

url-loader 也可以处理图片和字体，可以设置较小资源自动base64

image.png

我们通过option 向loader 中传入了一个参数,上面的配置的意思是，当图片的大小小于10k的时候，我们自动给其转换成base64

avatar
文章
阅读
粉丝