WebPack基础2

序：在上一篇基础上进行操作

资源加载：webpack默认只能加载js和json资源  其他资源类型（img/css/vue）需要安装加载器loader

CSS：

1.在src新建 assets 公共资源 ，新建css文件夹，并在其中新建 main.css ，写入基础的样式

2.在 index.js中导入 import "@/assets/css/main.css"

3.安装 npm install --save-dev style-loader css-loader （错误描述 ：You may need an appropriate loader to handle this file type  你需要一个加载器）

4,.在 webpack.config.js 中 引入 对应的 loader

// 处理其他类型的文件，并将它们转换为有效 模块
    module: {
        rules: [
            // 不同的文件 需要不同的加载规则
            // 1. test 属性，识别出哪些文件会被转换
            // 2. use 属性，定义出在进行转换时，应该使用哪个 loader。
            {
                test: /\.css$/i, //指名 css文件后缀
                // 将css文件经过css-loader 加载 再转交到 style-loader
                use: ['style-loader', 'css-loader'],
            },
        ]
    }

less：

1.在src/assets 公共资源 ，新建less文件夹，并在其中新建 main.less，写入基础的样式

2.在 index.js中导入 import "@/assets/less/main.less"

3.安装 npm install less less-loader --save-dev

4,.在 webpack.config.js 中 引入 对应的 loader

// 处理其他类型的文件，并将它们转换为有效 模块
    module: {
        rules: [
            // 不同的文件 需要不同的加载规则
            // 1. test 属性，识别出哪些文件会被转换
            // 2. use 属性，定义出在进行转换时，应该使用哪个 loader。
            {
                test: /\.css$/i, //指名 css文件后缀
                // 将css文件经过css-loader 加载 再转交到 style-loader
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.less$/i,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
        ]
    }

image：

1.在src/assets 公共资源 ，新建img文件夹，并在其中放入一直图片 1.png

2.在 index.js中导入 import "@/assets/img/1.png"

3.webpack 5 中，可以使用内置的 Asset Modules

4,.在 webpack.config.js 中 引入 对应的 loader

// webpack 5 中，可以使用内置的 Asset Modules
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },

字体：

使用内置的 Asset Modules

let span = document.createElement("span");
    span.innerText = 'icon';
    span.classList.add("iconfont","icon-xiangjiao")
    document.body.appendChild(span);

import icons from "@/assets/icon/iconfont.css"

json 默认支持

csv   npm install --save-dev csv-loader

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

xml   npm install --save-dev xml-loader

 {
      test: /\.xml$/i,
      use: ['xml-loader'],
 },