节我们来学习 webpack 中 loader 加载器的使用,那么什么是 loader 呢。从本质上来说,loader 就是一个 Node.js 模块,在 webpack 的定义中,loader 导出一个函数,loader 会在转换源模块的时候调用该函数。
webpack 本身依然是只能处理 JS 文件的,但是通过一系列的 loader ,就可以处理其他文件啦。例如 Less 和 Sass,以前我们编译这些 CSS 预处理器,需要使用 gulp 进行编译,而显示可以通过 webpack 中的 loader 加载器来实现。
webpack 中有一系列的 loader,在实际项目中,我们会根据不同的需求使用到不同的 loader。例如 webpack 中的一些常见 loader 如下所示:
我们可以在 webpack.config.js 配置文件中配置 loader,可以在 module.rules 中指定一个或多个 loader。
通过配置loader 的两个属性来实现:
例如默认情况下 webpack 只能打包 JS 文件,不能识别其他例如 CSS、Less、image等类型的文件,那么如果我们想要打包 CSS 样式文件,可以在 webpack 中使用 loader 加载器,可以将一种文件转换为另一种文件,将webpack不能识别的其它类型文件转换为 webpack 可识别 JS 类型文件。
首先需要安装 style-loader 和 css-loader ,安装命令如下所示:
npm install css-loader style-loader --save-dev
命令执行成功后,这两个 loader 会自动添加到 package.json 的依赖中,如下所示:
"devDependencies": {
"css-loader": "^3.6.0",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-dev-server": "^3.11.0"
}
然后在 webpack.config.js 中配置 loader,在 module 属性的 rule 属性中配置 loader 规则:
module:{
rules:[{
test:/.css$/,
use:['style-loader','css-loader']
}]
}
这里表示匹配所有 .css 后缀结尾的文件,通过 style-loader 和 css-loader 加载器进行转换后再编译。
然后我们创建一个 xkd.css 文件,内容如下所示:
p{
font-size: 12px;
color: red;
}
并将 xkd.css 文件导入到 index.js 入口文件中:
document.write('你好,侠课岛!');
// 导入 CSS 文件
import "./xkd.css";
然后我们执行打包命令后会重新生成打包文件,会发现 xkd.css 文件也成功打包到 bundle.js 文件中。
这就是 loader 的基本使用流程,先安装loader,然后在配置文件中配置 loader ,最后再进行打包就可以啦。
的:因为传统的link加载css样式会发起二次请求,所以我们需要在webpack中使用loader加载css样式
准备:你需要准备一个已经配置好的webpack项目
如果出现警告说:需要依赖webpack就再安装一下
mian.js
index.css & index.scss
index.html
启动项目
结果:
者: 秋天不落叶
转发链接:https://mp.weixin.qq.com/s/KmDLcJ0jhB667ZouDB8tyg
*请认真填写需求信息,我们会在24小时内与您取得联系。