Webpack loader & plugins

安装webpack

yarn global add webpack webpack-cli

webpack.config.js

首次使用webpack时，需要初始化webpack.config.js

var path = require("path");

module.exports = {
  mode: "development",  //production 或 development
  entry: "./src/index.js", //打包文件位置
  output: {
    path: path.resolve(__dirname, "dist"), //输出位置
    filename: "index.[contenthash].js", //输出文件名
  }
};

webpack-dev-server

使用webpack-dev-server可以方便开发，该工具会在修改文件后自动pack并刷新页面

yarn add -D webpack-dev-server

配置webpack.config.js

var path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.[contenthash].js",
  },
  devtool: "inline-source-map",
  devServer: {
    static: "./dist", //告诉server去哪找文件
  },
};

plugins

HtmlWebpackPlugin

使用该plugin可以让webpack通过模板生成目标网页

yarn add html-webpack-plugin --dev

配置webpack.config.js

var path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.[contenthash].js",
  },
  devtool: "inline-source-map",
  devServer: {
    static: "./dist",
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "素鸡烧肉",
      template: "src/assets/index.html", //指定模板地址
    }),
  ],
};

MiniCssExtractPlugin

该plugin可以将css文件通过link标签的形式插入到页面中。

yarn add -D mini-css-extract-plugin

配置webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

loaders

css-loader & style-loader

两个loader通常配合使用，style-loader会将css-loader读取的css文件通过style标签的形式插入到页面中。

yarn add -D css-loader style-loader

配置webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

sass-loader

配合css-loader & style-loader载入一个scss文件

yarn add -D sass-loader dart-sass

配置webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: { implementation: require("dart-sass") },
          },
        ],
      },
    ],
  },
};

less-loader

配合css-loader & style-loader载入一个less文件

yarn add -D less-loader

配置webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
    ],
  },
};

stylus-loader

配合css-loader & style-loader载入一个stylus文件

yarn add -D stylus stylus-loader

配置webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.styl$/,
        use: [
          "style-loader",
          "css-loader",
          "stylus-loader",
        ], 
      },
    ],
  },
};

Asset Modules引入文件

webpack5不再使用file-loader引入文件，而是内置了Asset Modules

const path = require('path');

module.exports = {
 module: {
   rules: [
     {
       test: /\.png/,          //引入图片
       type: 'asset/resource'  //文件类型
     }
   ]
 },
};

plugin 和 loader的区别

plugin是webpack的插件，用于丰富和拓展webpack的功能。

loader是webpack的加载器，用于载入某种特定的文件。

懒加载

不在一开始就加载，而是当触发了某些条件之后再加载，就是懒加载，可以提升页面性能。

import('./xxx.xxx')