webpack入门介绍 --- loaders
Posted ZZZ --- jh
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack入门介绍 --- loaders相关的知识，希望对你有一定的参考价值。
loaders
loaders
官网: https://webpack.js.org/loaders/
// webpack.config.js
module.exports = {
....,
module: {
rules:[
{
test:/\\.txt$/,
loader: 'raw-load'
}
]
}
}
案例: (但是webpack会默认报错,因为webpack处理不了txt和md这样的非js的模块,但是可以通过专门来处理纯文本内容,不同的loader有不同的作用)
// src/data/girl.txt
我是txt的内容
// src/index.js
import girl from './data/girl.txt'
console.log(girl);
raw-loader
加载文件原始内容(utf-8)
- 安装
npm install --save-dev raw-loader
- 在src下的index.js中引入
import girl from './data/girl.txt';
console.log(girl);
console.log('123456789')
- 在 webpack.config.js 中进行配置
module.exports = {
...,
module: {
rules: [
{
test: /\\.(txt|md)$/,
use: 'raw-loader'
}
]
}
}
- 然后package.json运行脚本start
注意:在黑窗口里面,写./node_modules/.bin/webpack会报错./不是内部或者外部的指令,要写成反斜杠.\\node_modules\\.bin\\webpack
markdown-loader
- 安装(markdown的和html)
npm install markdown-loader
npm install --save-dev html-loader
- 在src下的index.js中引入
import mdd from './data/haha.md';
console.log(mdd);
//在页面中输出markdown的内容
document.body.innerHTML = mdd;
console.log('123456789')
- 在 webpack.config.js 中进行配置
module.exports = {
...,
module: {
rules:[
...,
{
test:/\\.md$/,
// 执行多个loader时, 顺序是 从后往前
use:['html-loader','markdown-loader']
},
]
}
}
- 然后package.json运行脚本start
file-loader
将识别出的资源模块文件发送到指定的输出文件夹,并返回这个资源在输出目录的地址(字符串)
- 安装
npm install --save-dev file-loader
- 在src下的index.js中引入
import ss from './data/-26953ed6fb615e2a.jpg';
console.log(ss);
let img = new Image();
img.src = ss;
document.body.appendChild(img)
console.log('123456789')
- 在 webpack.config.js 中进行配置
module.exports = {
...,
module: {
rules:[
...,
{
test: /\\.(png|jpe?g|gif)$/i,
use:{
loader : 'file-loader',
options: {
// 设置打包后的文件位置
// 相对的时全局的outputPath路径
outputPath:'/image',
// [path] : 路径
// [name] : 文件名
// [ext] : 后缀
// name: '[path][name].[ext]',
// 设置打包后的文件返回的url
publicPath:'./dist/image',
}
}
}
]
}
}
- 然后package.json运行脚本start
批注 占位符:https://webpack.js.org/loaders/file-loader#placeholders
url-loader
可以处理file-loader所有的事情,但是遇到图片格式的模块,可以选择行的把图片转成base64格式的字符串,并打包到js中, 对小体积的图片比较合适,大图片不合适.
- 安装
npm install --save-dev url-loader
- 在 webpack.config.js 中进行配置
rules: [
...,
{
test: /\\.(png|jpe?g|gif)$/,
use: {
loader: "url-loader",
options: {
// placeholder 占位符 [name] 源资源模块的名称
// [ext] 源资源模块的后缀
name: "[name]_[hash].[ext]",
//打包后的存放位置
outputPath: "./images"
// 打包后文件的 url
publicPath: './images',
// 小于 100 字节转成 base64 格式
limit: 100
}
}
}
]
- 然后package.json运行脚本start
css-loader
分析css模块之间的关系,并合成一个css.
- 安装
npm install --save-dev css-loader
- 在src下新建一个cs.css文件
body{
background: rgb(47, 255, 203);
}
- 在index.js里面引入
import cs from './src/cs.css'
console.log(cs[0][1]);
//body{background: greenyellow;}
let sty = document.createElement('style');
sty.innerHTML = cs[0][1];
document.head.appendChild(sty);
- 在 webpack.config.js 中进行配置
rules: [
...,
{
{
test: /\\.css$/,
use: 'css-loader',
// or
use: {
loader: "css-loader",
options: {
// 启用/禁用 url() 处理
url: true,
// 启用/禁用 @import 处理
import: true,
// 启用/禁用 Sourcemap
sourceMap: false
}
}
}
}
]
- 然后package.json运行脚本start
style-loader
把css-loader生成的内容, 用style标签挂载到页面的head中.
- 安装
npm install --save-dev style-loader
- 在index.js里面引入
//cs[0][1] 改为 cs
console.log(cs);
- 在 webpack.config.js 中进行配置
rules: [
...,
{
test: /\\.css$/,
use: ["style-loader", "css-loader"]
}
]
同一个任务的 loader 可以同时挂载多个，处理顺序为：从右到左，也就是先通过 css-loader 处理，然后把处理后的 css 字符串交给 style-loader 进行处理
{
test: /\\.css$/,
use: [ 'style-loader',{
loader:'css-loader',
options: {
// 启用/禁用 url() 处理
url: false,
// 启用/禁用 @import 处理
// import: true,
// 启用/禁用 Sourcemap
// sourceMap: false
}
}]
}
- 然后package.json运行脚本start
sass-loader
把sass语法转换成css, 依赖node-sass模块
- 安装
npm install --save-dev sass-loader node-sass
- 在 webpack.config.js 中进行配置
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\\.scss$/,
use: [{
loader: "style-loader"
// 将 JS 字符串生成为 style 节点
}, {
loader: "css-loader"
// 将 CSS 转化成 CommonJS 模块
}, {
loader: "sass-loader"
// 将 Sass 编译成 CSS
}]
}]
}
};
注意:
- webpack默认情况下只能处理js模板;需要提供的其他功能来把任意文件数据作为模块进行处理
- 同一个任务的
loader可以同时挂载多个，处理顺序为：从右到左，也就是先通过css-loader处理，然后把处理后的css字符串交给style-loader进行处理
总结:
loaders
raw-loader加载文件原始内容markdown-loaderfile-loader将识别出的资源模块文件发送到指定的输出文件夹,并返回这个资源在输出目录的地址(字符串)url-loader可以处理file-loader所有的事情, 对小体积的图片比较合适,转成base64格式的字符串css-loader分析css模块之间的关系,并合成一个cssstyle-loader把css-loader生成的内容,用style标签挂载到页面的head中.sass-loader把sass语法转换成css,依赖node-sass模块
以上是关于webpack入门介绍 --- loaders的主要内容，如果未能解决你的问题，请参考以下文章