淘先锋技术网

首页 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()
    ]
  }
}