三、webpack的基本使用，loader，css文件处理（Mhua）

loader

webpack 只能处理 js 和 json 文件，这是 webpack 自带的能力。而 loader 可以让 webpack 去解析 其它类型的文件，并且将这些文件转为有效的模块，以拱应用程序使用。

# 配置项如下
const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        # 当你通过 require,import 导入文件的时候，对这个文件进行打包之前，使用 raw-loader 处理一下。
        test: /\.txt$/,
        use: 'raw-loader'
      }
    ]
  }
}

css-loader、style-loader

安装 css-loader，style-loader

npm install css-loader -D    # 用于处理css 文件
npm install style-loader -D  # style-loader 把 css 放置到页面上

新增 style.css 文件

.hello {
  color: red;
}

在入口文件 index.js 引入 style.css 文件

import imgSrc from "./assets/2.png";
import './style.css'

开始打包，控制台出现报错信息，这是因为没有在 webpack.config.js文件进行配置。

npx webpack

# 控制台报错
ERROR in ./src/style.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders 
are configured to process this file. See https://webpack.js.org/concepts#loaders  
> .hello {
|   color: red;
| }
 @ ./src/index.js 3:0-20

webpack 5.74.0 compiled with 1 error in 162 ms

在 webpack.config.js 配置 css-loader 处理 css 文件

module: {
  rules: [
    {
      test: /\.css$/,
      # loader 执行顺序是从右到左（两个loader位置不能颠倒）
      # 首先通过 css-loader 处理 css 文件
      # 其次通过 style-loader 把 css 放置到页面上
      use: ['style-loader', 'css-loader']
    }
  ]
}

重新 运行 npx webpack 可以正常打包了，页面样式就可以正常加载了。

less less-loader

安装 less less-loader css预处理器

npm install less less-loader -D

修改 webpack.config.js 配置文件

module: {
  rules: [
    {
      # css 或 less 文件
      test: /\.(css|less)$/,
      # loader 执行顺序是从右到左
      # 首先通过 less-loader 处理 css 文件
      # 然后 less-loader 处理后的css文件交给 css-loader 进行处理
      # 最后 style-loader 接收 less-loader、css-loader处理后的文件
      # 执行顺序：less-loader、css-loader、style-loader。三个顺序不可变。
      use: ['style-loader', 'css-loader', 'less-loader']
    }
  ]
}

新建 style.less 文件

body { 
  div {
    background-color: skyblue !important;
  }
}

在入口文件index.js，导入style.less文件。

import imgSrc from "./assets/2.png";
import "./style.css";
import "./style.less"; // less 文件

执行打包命令后，页面样式正常加载。

mini-css-extract-plugin

style-loader插件默认是将 样式 加载到 html文件的 head标签之前，mini-css-extract-plugin插件能够将所有css放到 单独的css文件中。

# 安装插件  -D 表示是开发环境下。
npm install mini-css-extract-plugin -D

在 webppack.config.js 中 配置插件

# 首先导入插件
const MinCssExtractPlugin = require("mini-css-extract-plugin")

# 在 plugins 配置插件
plugins: [
  // 把 css 合并成一个文件
  new MinCssExtractPlugin({
    # 打包文件，放到 dist 下的 styles 目录下
    # contenthash 哈希字符串。这里用来配置生成的文件名
    filename: "styles/[contenthash].css"
  })
]


# 并且把 'style-loader' 换成  MinCssExtractPlugin.loader 。
module: {
  rules: [
    {
      test: /\.(css|less)$/,
      use: [MinCssExtractPlugin.loader, 'css-loader', 'less-loader']
    }
  ]
}

执行打包命令：

npx webpack

生成 dist\styles\496a06c172cfa50a0e44.css 文件，文件内容如下：webpack 打包成功。

/*!********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/style.css ***!
  \********************************************************************************************************/
.hello {
  color: red;
}

/*!*********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/style.less ***!
  \*********************************************************************************************************/
body div {
  background-color: skyblue !important;
}


/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLzQ5NmEwNmMxNzJjZmE1MGEwZTQ0LmNzcyIsIm1hcHBpbmdzIjoiOzs7QUFBQTtFQUNFO0FBQ0Y7Ozs7O0FDRkE7RUFFSTtBQUFKIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vdGVzdC8uL3NyYy9zdHlsZS5jc3MiLCJ3ZWJwYWNrOi8vdGVzdC8uL3NyYy9zdHlsZS5sZXNzIl0sInNvdXJjZXNDb250ZW50IjpbIi5oZWxsbyB7XG4gIGNvbG9yOiByZWQ7XG59IiwiYm9keSB7IFxuICBkaXYge1xuICAgIGJhY2tncm91bmQtY29sb3I6IHNreWJsdWUgIWltcG9ydGFudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9*/

css-minimizer-webpack-plugin

css-minimizer-webpack-plugin 插件可以压缩 css 文件
安装插件：

npm install css-minimizer-webpack-plugin -D

配置webpack.config.js文件

# 导入插件
const CssMinmizerPlugin = require("css-minimizer-webpack-plugin")

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

# 并且把mode改成 production
mode: 'production',

执行打包命令：

npx webpack

生成的css文件如下：

.hello{color:red}body div{background-color:skyblue!important}
/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLzA1YWIxNjYxZTZhYjU0MGEyMGZjLmNzcyIsIm1hcHBpbmdzIjoiQUFBQSxPQUNFLFNBQ0YsQ0NGQSxTQUVJLGtDQUFKIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vdGVzdC8uL3NyYy9zdHlsZS5jc3MiLCJ3ZWJwYWNrOi8vdGVzdC8uL3NyYy9zdHlsZS5sZXNzIl0sInNvdXJjZXNDb250ZW50IjpbIi5oZWxsbyB7XG4gIGNvbG9yOiByZWQ7XG59IiwiYm9keSB7IFxuICBkaXYge1xuICAgIGJhY2tncm91bmQtY29sb3I6IHNreWJsdWUgIWltcG9ydGFudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9*/

下方为完整的 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
  mode: 'production',
  // 打包后，可以方便的调试代码。代码的位置和源文件一致。
  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']
      }
    ]
  },

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