四、webpack的基本使用，处理字体文件，CSV，XML文件（Mhua）

字体文件

webpack 处理字体文件配置

module: {
  rules: [
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      # asset/resource 可以帮助我们载入任何类型的资源
      type: "asset/resource"
    }
  ]
}

加载数据

如JSON文件，CSV，TSV，XML。类似于：webpack 对 JSON 支持 实际上是内置的，也就是 import Data from “./data.json” 默认是正常的。但是要导入 CSV TSV XML ，需要使用 csv-loader、xml-loader。处理这三类文件。

安装 csv-loader、xml-loader

npm install csv-loader xml-loader -D 

在 webpack.config.js 配置 module 参数

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

在js文件中就可以正常使用 xml 和 csv 文件了。

import data1 from "./data.xml"
import data2 from "./data.csv"

babel-loader

babel-loader 可以将 es6，es7的语法转换为低版本语法。
需要安装三个插件：

npm install babel-loader @babel/core @babel/preset-env -D

在 webpack.config.js 配置 module 参数

module: {
  rules: [
      {
        test: /\.js$/,
        # 排除 node_modules 目录下的 js 文件
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"]
          }
        }
      }
  ]
}

完整的 webpack.config.js 代码如下：

let path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MinCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinmizerPlugin = require("css-minimizer-webpack-plugin")

module.exports = {
  // 入口文件
  entry: "./src/index.js",
  // 打包后文件
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, './dist'),
    clean: true,  // 每次打包前先删除 dist 目录

    // contenthash 表示哈希值
    // ext 表示扩展名
    assetModuleFilename: "images/[contenthash][ext]"
  },

  // 模式 development/production
  mode: 'development',
  // 打包后，可以方便的调试代码。代码的位置和源文件一致。
  devtool: "inline-source-map",

  // 插件使用。
  // HtmlWebpackPlugin 用于自动生成 dist 目录下 index.html 魔板文件
  plugins: [
    new HtmlWebpackPlugin({
      // 根据魔板文件生成
      template: "./index.html",
      // 生成 dist 目录中 html 的文件名
      filename: "app.html",
      // 生成的 js 文件 引入到body标签中
      inject: "body"
    }),

    // 把 css 合并成一个文件
    new MinCssExtractPlugin({
      // 打包文件，放到 dist 下的 styles 目录下
      // contenthash 哈希字符串
      filename: "styles/[contenthash].css"
    })
  ],

  // 指定 dist 作为根路径
  devServer: {
    static: "./dist"
  },

  // 配置打包 其它资源文件 规则
  module: {
    rules: [
      {
        test: /\.png$/,
        type: "asset/resource",

        // 打包后文件命名 
        // 优先级高于 output 下 assetModuleFilename
        generator: {
          filename: "images/[contenthash][ext]"
        }
      },
      {
        test: /\.svg$/,
        // 导出资源类型的 dataurl (base64格式)
        type: "asset/inline"
      },
      {
        test: /\.txt$/,
        // 导出资源的源代码
        type: "asset/source"
      },
      {
        test: /\.jpg$/,
        // 会根据 resource / inline 两种方式进行选择
        // 默认情况下，当资源文件大于 8k 选择 resource 模式生成资源
        // 当资源文件小于8k 选择 inline 生成 base64 数据。
        type: "asset",
        parser: {
          dataUrlCondition: {
            // 设置临界值，超过 maxSize 就会 使用  asset/resource 模式，否则使用  asset/inline 生成 base64 代码
            maxSize: 4 * 1024 * 1024   // 4 M
          }
        }
      },
      {
        test: /\.(css|less)$/,
        // loader 执行顺序是从右到左（三个loader位置不能颠倒）
        use: [MinCssExtractPlugin.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: /\.js$/,
        // 排除 node_modules 目录下的 js 文件
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"]
          }
        }
      }
    ]
  },

  // 优化配置
  optimization: {
    minimizer: [
      new CssMinmizerPlugin()
    ]
  }
}