webpack6-资源管理

loader使用

在打包时，打包.txt文件之前先用raw-loader将文件进行转换。

使用loader加载css模块

安装：npm i css-loader -D 用与解析css
项目根目录下安装，
安装：npm i style-loader -D 用于将css放到网页上
配置：

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.export = {
  // entry:"./src/index.js",
  // output:{
  //   filename:"bundle.js",
  //   path:path.resolve(__dirname,"./dist"),
  //   clean:true,
  //   assetModuleFilename:"images/[contenthash][ext]"
  // },
  // mode:"development",
  // devtool:"inline-source-map",
  // plugins: [
  //   new HtmlWebpackPlugin({
  //     template:"./index.html",
  //     filename:"app.html",
  //     inject:"body"
  //   })
  // ],
  // 定义哪些资源文件需要打包
  module:{
      rules:[
      // {
      //   test:/\.png$/,
      //   type:"asset/resource",
      //   generator:{
      //     filename:"images/[contenthash][ext]"
      //   }
      // },
      // {
      //   test:/\.svg$/,
      //   type:"asset/inline",
      // },
      // {
      //   test:/\.txt$/,
      //   type:"asset/source",
      // },
      // {
      //   test:/\.jpg$/,
      //   type:"asset",
      //   // 解析器
      //   parser:{
      //     // 定义是否生成URL的临界值，当文件大于时创建，反之生成URL
      //     dataUrlCondition:{
      //       maxSize:4*1024*1024
      //     }
      //   }
      // }
      {
        test:/\.css$/,
        // 定义在打包之前使用css-loader转换.css文件
        // use:"css-loader"
        // 多个loader时使用数组,但读取时时逆序读取
        // 因为在打包时需要先识别css文件并转化（"css-loader"），然后再将css放到网页上（"style-loader"）
        use:["style-loader","css-loader"]
        // 链式调用，css-loader处理后的源将会传递给style-loader使用
      }
    ]
  }
}

打包后，网页就可以加载css样式了

如果需要解析scss，less等，需要添加一个loader，如下：
安装： npm i less-loader less -D
使用：less-loader 是需要放到css-loader后面，因为需要先less通过less-loader解析，再给css-loader解析

{
        // 对应的使用less时，对应的扩展名也需要修改，如下：    
        test:/\.(css|less)$/,
        // 定义在打包之前使用css-loader转换.css文件
        // use:"css-loader"
        // 多个loader时使用数组,但读取时时逆序读取
        // 因为在打包时需要先识别css文件并转化（"css-loader"），然后再将css放到网页上（"style-loader"）
        use:["style-loader","css-loader","less-loader"]
        // 链式调用，css-loader处理后的源将会传递给style-loader使用
      }

打包后css文件和less文件内容都能显示在网页中了
less文件需要三个loader：”style-loader”,”css-loader”,”less-loader”
css文件需要两个loader：”style-loader”,”css-loader”

抽离和压缩css

抽离css文件

这个插件是基于webpack5的
安装：npm i mini-css-extract-plugin -D
用于抽离css文件
引入插件

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.export = {
  // entry:"./src/index.js",
  // output:{
  //   filename:"bundle.js",
  //   path:path.resolve(__dirname,"./dist"),
  //   clean:true,
  //   assetModuleFilename:"images/[contenthash][ext]"
  // },
  // mode:"development",
  // devtool:"inline-source-map",
  plugins: [
    new HtmlWebpackPlugin({
      template:"./index.html",
      filename:"app.html",
      inject:"body"
    }),
    // 实例化
    new MiniCssExtractPlugin({
      filename:"styles/[contenthash].css"
    })
  ],
  // 定义哪些资源文件需要打包
  module:{
      rules:[
      // {
      //   test:/\.png$/,
      //   type:"asset/resource",
      //   generator:{
      //     filename:"images/[contenthash][ext]"
      //   }
      // },
      // {
      //   test:/\.svg$/,
      //   type:"asset/inline",
      // },
      // {
      //   test:/\.txt$/,
      //   type:"asset/source",
      // },
      // {
      //   test:/\.jpg$/,
      //   type:"asset",
      //   // 解析器
      //   parser:{
      //     // 定义是否生成URL的临界值，当文件大于时创建，反之生成URL
      //     dataUrlCondition:{
      //       maxSize:4*1024*1024
      //     }
      //   }
      // }
      {
        test:/\.(css|less)$/,
        // 这时需要将css文件抽离，所以将不需要style-loader，替换为MiniCssExtractPlugin-loader
        // 这个loader是由MiniCssExtractPlugin插件自带的
        use:[MiniCssExtractPlugin-loader,"css-loader","less-loader"]
      }
    ]
  }
}

打包后，会生成一个main.css文件（在dist文件的根目录下），这个文件将会把所有css文件less文件都合并在一起（抽离）。
这时在入口页面（app.html）中将会只引入main.css来代替其他文件

如何指定抽离后文件的位置：在实例化MiniCssExtractPlugin时指定一个filename即可，如下
可以指定文件名，扩展名

打包后：

压缩css文件

安装：npm i css-minimizer-webpack-plugin -D
这个插件需要在优化配置中配置，并需要将mode修改为production

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CSSMinimizerPlugin = require("css-minimizer-webpack-plugin")
module.export = {
  // entry:"./src/index.js",
  // output:{
  //   filename:"bundle.js",
  //   path:path.resolve(__dirname,"./dist"),
  //   clean:true,
  //   assetModuleFilename:"images/[contenthash][ext]"
  // },
  mode:"production",
  // devtool:"inline-source-map",
  plugins: [
    // new HtmlWebpackPlugin({
    //   template:"./index.html",
    //   filename:"app.html",
    //   inject:"body"
    // }),
    // 实例化
    new MiniCssExtractPlugin({
      filename:"styles/[contenthash].css"
    })
  ],
  // 定义哪些资源文件需要打包
  module:{
      rules:[
      // {
      //   test:/\.png$/,
      //   type:"asset/resource",
      //   generator:{
      //     filename:"images/[contenthash][ext]"
      //   }
      // },
      // {
      //   test:/\.svg$/,
      //   type:"asset/inline",
      // },
      // {
      //   test:/\.txt$/,
      //   type:"asset/source",
      // },
      // {
      //   test:/\.jpg$/,
      //   type:"asset",
      //   // 解析器
      //   parser:{
      //     // 定义是否生成URL的临界值，当文件大于时创建，反之生成URL
      //     dataUrlCondition:{
      //       maxSize:4*1024*1024
      //     }
      //   }
      // }
      {
        test:/\.(css|less)$/,
        // 这时需要将css文件抽离，所以将不需要style-loader，替换为MiniCssExtractPlugin-loader
        // 这个loader是由MiniCssExtractPlugin插件自带的
        use:[MiniCssExtractPlugin-loader,"css-loader","less-loader"]
      }
    ]
  },
  // 优化配置
  optimization:{
    minimizer:[
        new CSSMinimizerPlugin()
    ]
  }
}

配置完后打包，打包后的css文件将会是一个压缩文件，如下

加载images图像

通过资源模块也可以加载图片。
在css中加载图片
直接通过css引入图片作为背景，然后再通过资源模块解析图片，最后打包就可以了。这样打包时如果有提示警告，则可以将mode属性修改为development,就不会由警告了。

加载fonts字体

通过资源模块加载字体

asset/resource可以帮我们载入任何类型的资源。

打包后，在浏览器中查看效果

加载数据

csv/tsv(csv中的数据是使用“，”分隔，tsv中的数据是使用“type”分隔)用于对excel的数据进行转换
安装：npm i csv-loader xml-loader -D
配置：

打包后，xml文件会转化为一个对象：

csv会转换为一个数组：

自定义json模块parser

yaml文件
通过缩进控制是否是子项

toml文件
通过中括号定义是否是子项（下方文件扩展名错误，应为toml）

json5文件
json5文件是对接送文件的升级
json5文件中，可以添加注释，key值将可以不使用双引号，value可以使用单引号，还可以使用\n等转义符

要加载这三个文件需要安装：npm i toml yaml json5 -D

// 先导入三个模块
const toml = require("toml")
const yoml = require("yoml")
const json5 = require("json5")
module:{
  rules:[
    {
      // 需要转换的文件
      test:/.\toml$/,
      // 转换后的类型
      type:"json",
      // 使用什么转换
      parser:{
        parse:toml.parse
      }
    },
    {
      // 需要转换的文件
      test:/.\yoml$/,
      // 转换后的类型
      type:"json",
      // 使用什么转换
      parser:{
        parse:yoml.parse
      }
    },
    {
      // 需要转换的文件
      test:/.\json5$/,
      // 转换后的类型
      type:"json",
      // 使用什么转换
      parser:{
        parse:json5.parse
      }
    }
  ]
}

修改配置文件后，可以编译一下，查看是否有问题（npx webpack）
引入文件后打印文件内容

结果：