webpack 管理资源-06

1、什么是loader？

 webpack 只能理解 js 和 json 文件，loader 可以让webpack解析其他资源类型的文件，并且将这些文件转换为有效的模块

2、加载css

需要安装 style-loader 和 css-loader，并在module中配置中添加这些 loader

切换到项目根目录，安装 npm install css-loader -D，npm install style-loader -D（把css放置到页面上）

配置webpack.config.js文件

module: {
    rules: {
        {
            // 识别出哪些文件被转换
            test: /\.(css|less)$/,
            // 被转换的时候，识别用哪个loader来进行转化
            // 先执行css-loader，再执行style-loader，是从后往前加载的
            use: ['style-loader', 'css-loader']
        }
    }
}

新建style.css文件

.hello{
    color: red
}

在 index.js 中引入

import './style.css'

document.body.classList.add('hello')

执行 npx webpack 和 npx webpack-dev-server

 如果要解析sass、less这样的文件，根目录全局安装：npm install less-loader less -D

修改webpack.config.js 配置文件：

use: ['style-loader', 'css-loader', 'less-loader']

src文件夹内 新建 style.less 文件

@color: #f9efd4;

body {
    background-color: @color;
}

在index.js中引入 import './style.less'

此时，页面有淡黄色背景图

3、抽离和压缩 css

压缩css，以便在生产环境中节省加载时间，同时还可以将css文件抽离成一个单独的文件，需要安装 mini-css-extract-plugin 这个插件，npm install mini-css-extract-plugin -D（使用这个插件的前提是基于webpack5的环境）

这个插件会将css提取到单独的文件中，为每个包含 css 的 js 文件创建一个css文件，并且支持css和SourceMaps 的按需加载

将 loader 与 plugin 添加到 webpack 配置文件中

更改webpack配置文件：

// 引入模块
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            // 模板
            template: './index.html',
            // 输出的文件名
            filename: 'app.html',
            // script标签生成的位置
            inject: 'body'
        }),
        new MiniCssExtractPlugin({
            // 自定义打包css文件夹的名字以及文件名
            filename: 'styles/[contenthash].css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.(css|less)$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            }
        ]
    }, 
}

执行 npx webpack 命令，dist文件夹内新增 styles 文件夹，此文件主要存放合并的css代码

 此时的css文件并没有压缩，切换到根目录终端，需要下载插件进行压缩：npm install css-minimizer-webpack-plugin -D

更改webpack文件

// css压缩模块
const CssMininizerPlugin = require('css-minimizer-webpack-plugin')
module.exports = {
    mode: 'production',
    // 优化配置
    optimization: {
        minimizer: [
            new CssMininizerPlugin()
        ]
    }
}

 终端执行 npx webpack，此时打包后的css文件已经压缩好了

4、加载 images 图像

在src下的 style.css 文件内书写

.block-bg {
    // 引入你想加载的图片
    background-image: url(./assets/wx.jpg) !important;
}

在index.js文件内书写

import './style.css'
const block = document.createElement('div')
block.style.cssText = 'width: 200px; height: 50px; background: pink'
block.classList.add('block-bg')
block.textContent = txt
document.body.appendChild(block)

webpack配置文件内的mode属性值改为 development

5、加载 fonts 字体

更改webpack配置文件

module: {
    mode: 'development'
    rules: [
        {
            test: /\.(woff|woff2|eot|otf)$/i,
            type: 'asset/resource'
        }    
    ]
}

在src 文件夹下的style.css文件内添加字体

@font-face {
    font-family: 'iconfont';
    src: url('./assets/iconfont.ttf') format('truetype')
}

.icon {
    font-family: 'iconfont';
    font-size: 30px;
}

在 src 文件夹下的 index.js文件中引用

const span = document.createElement('span')
span.classList.add('icon')
// &#xe668 下载字体的时候会提供给你
span.innerHTML = ''
document.body.appendChild(span)

重新编译 npx webpack 即可

6、加载数据

如果要导入 csv、tsv、xml文件，可以使用 csv-loader 和 xml-loader

项目终端安装：npm install csv-loader xml-loader -D

 在 src 文件夹内引入

import Data from './assets/data.xml'
import Notes from './assets/data.csv'

console.log(Data)
console.log(Notes)

webpack 添加配置

module: {
    rules: [
        {
            test: /\.(csv|tsv)$/i,
            use: ['csv-loader']
        },
        {
            test: /\.xml$/i,
            use: ['xml-loader']
        }
    ]
}

由此可见，xml会转化为js对象，csv会转化为一个数组

 7、自定义 JSON 模块parser

通过使用 自定义parser 替代特定的 webpack loader，可以将任何 toml、yaml 或 jsons 文件作为 JSON 模块导入

切换根目录终端安装： npm install toml yaml json5 -D

新增webpack配置：

const toml = require('toml')
const yaml = require('yaml')
const json5 = require('json5')

module: {
    rules: [
        {
            test: /\.toml$/,
            type: 'json',
            // 解析器
            parser: {
                parser: toml.parse
            }
        },
        {
                test: /\.yaml$/,
                type: 'json',
                parser: {
                    parser: yaml.parse
                }
            },
            {
                test: /\.json5$/,
                type: 'json',
                parser: {
                    parser: json5.parse
                }
            }
    ]
}

在 src 文件夹下的 assets下新建下面三个类型的文件 

 并在index.js中引入

// import toml from './assets/data.toml/'
import yaml from './assets/data.yaml'
import json5 from './assets/data.json5'

// console.log(toml.title)
// console.log(toml.owner.name)
console.log(yaml.title)
console.log(yaml.owner.name)
console.log(json5.title)
console.log(json5.owner.name)

 控制台打印