首页 1 2 3 4 5 6 7

webpack5之loader配置（四）

总述：要明白为什么要引入loader?

因为webpack只能理解js和json这样的文件，这是webpack开箱可用的自带能力，loader可以让

webpack去解析其他类型的文件，并且将这些文件转化为有效的模块以供我们应用程序使用

如何定义loader

在module.rules下面定义两个属性，一个是test(用于识别哪些文件被转换)，另一个是use(确定应以

转化的时候应该使用哪个loader) ，如下图：

如上列子说明当webpack执行过程中遇到require或者是import去解析一个.txt这样的文件的时候，

在对这个文件打包之前先使用raw-loader转化

加载css

为了在javascript模块中import一个css文件，需要安装style-loader和css-loader,并在module配置中

添加这些loader:

安装插件：

npm i style-loader css-loader -D

在配置文件中添加解析器：

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // 在 head 中创建 style 标签
          'style-loader',
          // 将 css 文件整合到 js 文件中
          'css-loader'
        ]
      }
    ]
  }
}

注意：style-loader和css-loader的书序不能颠倒，先要执行cssloader，再执行style-loader，是从

后往前加载

在 JS 文件中导入 CSS 文件：

import '../css/main.css'

注意：在实际开发过程中，一般会使用less或者是sass进行开发，所以在打包less或者是sass的时

候也要安装对应的包：

less安装：

npm i less less-loader -D

sass安装：

npm i sass-loader sass -D

安装完成之后需要重新在webpack.config.js中的module.roles.use做配置

// 如果你使用的是less
{
    test: /\.css$/,
    use: ['style-loader', 'css-loader', 'less-loader']
 }

//如果你使用的是sass
{
   test: /\.css$/,
   use: ['style-loader', 'css-loader', 'sass-loader']
 }

抽离css为单独的文件：

安装抽离css为单独文件的插件：该插件基于webpack5构成，主要是把style标签引入css转化为link

引入css

安装插件：

npm i mini-css-extract-plugin -D

配置：

// 引入抽离css为独立文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  ...
  plugins: [
    new MiniCssExtractPlugin({
        // 指定抽离的之后形成的文件名
      filename: 'styles/[contenthash].css'
    })
  ],
  module: {
    rules: [
      // 处理后缀名为.css或者是.less的文件
      {
        test: /\.(css|less)$/,
        // stuyle-loader作用是在 head 中创建 style 标签
        // MiniCssExtractPlugin.loader是将css抽离为独立的文件
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      }
    ]
  }
}

压缩css文件

安装插件：

npm i css-minimizer-webpack-plugin -D

配置：

// 引入css压缩插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")

module.exports = {
  ...
  // 优化配置项
  optimization: {
    minimizer: [
      // 使用插件优化 css 代码
      new CssMinimizerPlugin()
    ],
  },
  // 模式，因为压缩css代码只在生产模式下生效
  mode: 'production'
}

字体资源

通过 CSS 引入字体资源

@font-face {
  font-family: 'PujiSansExpandedHeavy';
  src: url('../fonts/PujiSans-ExpandedHeavy.eot'); /* IE9 Compat Modes */
  src: url('../fonts/PujiSans-ExpandedHeavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/PujiSans-ExpandedHeavy.woff2') format('woff2'), /* Modern Browsers */
    url('../fonts/PujiSans-ExpandedHeavy.woff') format('woff'), /* Modern Browsers */
    url('../fonts/PujiSans-ExpandedHeavy.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

配置：

module.exports = {
  ...
  module: {
    rules: [
     // 配置字体文件
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        // asset/resource可以帮助我们载入任何类型
        type: 'asset/resource'
      }
    ]
  }
}

加载数据

除了js，json，images, 可以加载的有用数据还有CSV/TSV/XML，要导入CSV, TSV和XML，可以

使用csv-loader和xml-loader

安装插件：

npm i csv-loader xml-loader -D

配置：

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

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

自定义JSON模块parser

通过使用自定义parser模块替代特点的webpack loader，可以将任何的toml, vaml, 或者是json5文

件作为json模块导入

安装插件：

npm i toml yaml json5 -D

在 webpack.config.js 文件中进行配置:

// 引入toml
const toml = require('toml')
// 引入yaml
const yaml = require('yaml')
// 引入json5
const json5 = require('json5')

module.exports = {
  ...
  module: {
    rules: [
     {
        test: /\.toml$/,
        type: 'json', 
        parser: {
          parse:toml.parse
        }
      },

      {
        test: /\.yaml$/,
        type: 'json', 
        parser: {
          parse:yaml.parse
        }
      },

      {
        test: /\.json5$/,
        type: 'json', 
        parser: {
          parse:json5.parse
        }
      }
    ]
  }
}

关于webpack5之前所有配置如下：

// 引入node.js中的path
const path = require('path')
// 引入html打包插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 引入抽离css为独立文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 引入css压缩插件
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
// 引入toml
const toml = require('toml')
// 引入yaml
const yaml = require('yaml')
// 引入json5
const json5 = require('json5')

module.exports = {
  // 指定入口文件
  entry: './src/index.js',

  // 指定出口
  output:{
    // 指定输出文件的文件名
    filename:'bundle.js',
    // 指定文件的输出路径
    path: path.resolve(__dirname, './dist'),
    // 配置再次打包时清除上一次打包的无用文件
    clean:true,
    // 重置输出的文件名的方法一
    // contenthash表示根据图片内容生成hash值
    // ext表示扩展名
    assetModuleFilename:'images/[contenthash][ext]'
  },

  // 设置webpack是开发模式/生产模式
  mode: 'development',

  // 实现精准定位代码的行数
  devtool: 'inline-source-map',

  // 配置插件
  plugins:[
    new HtmlWebpackPlugin({
      // 指定模板
      template:'./index.html',
      // 输出的文件名，可根据自己的需要定义
      filename: 'app.html',
      // 指定在哪里生成script标签
      inject:'body'
    }),

    new MiniCssExtractPlugin({
      // 指定抽离的之后形成的文件名
      filename: 'styles/[contenthash].css'
    })
  ],

  // 实时监听文件修改的配置，并且网页自动刷新
  devServer: {
    // devServer指向的物理路径
    static:'./dist'
  },

  // 配置模块
  module: {
    rules:[
      // 配置后缀名为.png的图片
      {
        test:/\.png$/,
        type:'asset/resource',
        // 指定输出的文件名的方法二，generator的优先级高于output中assetModuleFilename的配置
        generator:{
          filename: 'images/[contenthash][ext]'
        }
      },
      // 配置后缀名为.svg的图片
      {
        test:/\.svg$/,
        type: 'asset/inline'
      },
      // 导入文本文件
      {
        test:/\.txt$/,
        type: 'asset/source'
      },
      // 通用资源类型
      {
        test: /\.jpg$/,
        type: 'asset',
        parser: {
          dataUrlCondition:{
            // 默认大小的尺寸值是4kb
            maxSize: 4*1024
          }
        }
      },
      // 处理后缀名为.css或者是.less的文件
      {
        test: /\.(css|less)$/,
        // stuyle-loader作用是在 head 中创建 style 标签
        // MiniCssExtractPlugin.loader是将css抽离为独立的文件
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      },
      
      // 配置字体文件
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        // asset/resource可以帮助我们载入任何类型
        type: 'asset/resource'
      },

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

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

      {
        test: /\.toml$/,
        type: 'json', 
        parser: {
          parse:toml.parse
        }
      },

      {
        test: /\.yaml$/,
        type: 'json', 
        parser: {
          parse:yaml.parse
        }
      },

      {
        test: /\.json5$/,
        type: 'json', 
        parser: {
          parse:json5.parse
        }
      }
    ]
  },

  // 优化配置属性
  optimization: {
    // 压缩css代码
    minimizer:[
      new CssMinimizerPlugin()
    ]
  }
}

LabelImg标注的VOC格式xml标签与YOLO格式txt标签相互转换

1、VOC标签格式说明 VOC数据格式，会直接把每张图片标注的标签信息保存到一个xml文件中。 xml中的信息如下： <annotation> <folder>矿区图像</

python命令行解析之parse_known_args(）函数和parse_args()

在python中，命令行解析的很好用，首先导入命令行解析模块 import argparse import sys 然后创建对象 parse=argparse.ArgumentParser() 然后增加命令行

从FTP服务器中指定目录下载或更新文件并通过SQLite数据库记录日志（基于Python+SQLite3）

领导需求:基于Python开发一个小工具，使其能够实现从目标FTP服务器指定路径中实时轮训下载或更新文件到本地指定路径，仅供学习或参考。 SQLite3安装教程：

【Spring专题】手写简易Spring容器过程分析

目录前言

【python】from scipy.misc import imread报错:ImportError: cannot import name imread

from scipy.misc import imread 报错：ImportError: cannot import name imread 在网上找了解决方法，大致如下： 1.安装

Redis持久化之AOF原理

一、什么是AOF 它也是Redis持久化的重要手段之一，aof-》Append Only File，只追加文件，也就是每次处理完请求命令后都会将此命令追加到aof文件的末尾。而RDB是压缩成二进制等时机开子进程去干这件事。二、优缺点

ant帮助

2.Ant的任务:---------------------------------------------------------------- ant 在另一个build file上调用ant antcall 调用一个当前build file上的target

企业安全三步走惠普重新思考安全战略

本文讲的是企业安全三步走惠普重新思考安全战略，近几年来，企业面临的安全威胁越来越大，惠普企业安全产品部北亚区总经理姚翔表示，在过去一年中有92%的福布斯排行2000的公

oracle登录提示无监听,oracle 登录时提示无监听登陆不进去

这学期开了oracle课程，第一次装oracle时可以登录。结果，第二次上课时，发现怎样都无法登陆。使用sql plus登录时，输入用户口令等后，提示【无监听程序】。百度了一下，知道上面说， 1检查listener.ora 文件的配置

Rabbitmq消息队列详解

文章目录