代码仓库地址：
github.com/huyiling111…

用一张图总结上篇文章的内容：

一、loader 和 plugin 区别

1. 翻译：loader 是加载器，plugin 是插件
2. 中文解释：加载器就是用来加载文件的，
   1. 比如 JS loader 是用来加载 JS 的，把高级的 JS 转译成低版本的 JS,
   2. CSS loader 就是用来加载 CSS 的
3. 插件是用来扩展 webpack 功能的，比如 HTMLWebpackPlugin 是用来加载 HTML 的，miniCssExtractPlugin 可以把多个 CSS 文件合并成一个 CSS 文件
4. 总的来说，加载器主要用来加载文件，而插件的功能更加丰富

目标八：用 webpack 加载 scss

首先安装

yarn add --dev dart-sass
yarn add --dev sass-loader

配置：需要注意的是 style-loader, css-loader, sass-loader 的顺序不能错，否则会报错
sass-loader 负责把 sass 编译成 css, css-loader 负责把 css 变成 js, style-loader 负责从 js 字符串生成 style 标签

module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                  // Creates `style` nodes from JS strings
                    'style-loader',
                   // Translates CSS into CommonJS
                    'css-loader',
                    {
                      // Compiles Sass to CSS
                        loader: 'sass-loader',
                        options: {
                            implementation: require('dart-sass'),
                        }
                    }
                ],
            }
        ]

目标九：用 webpack 加载 less 和 stylus

安装：

yarn add --dev less-loader
yarn add --dev less

配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        loader: ["style-loader", "css-loader", "less-loader"], // compiles Less to CSS
      },
    ],
  },
};

安装：

yarn add --dev stylus stylus-loader

注意： 需要在 vscode 配置 stylus 插件，才能语法高亮

配置

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

目标十：用 webpack 加载图片

之前我们引入图片需要使用 img 标签

<img src="../..1.png" />

那么应该如何用 webpack 加载图片呢？
使用方法：用 file-loader
参考官方文档：webpack.js.org/guides/asse…
首先需要安装

yarn add --dev file-loader

然后需要配置

webpack.config.js;

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"],
      },
    ],
  },
};

然后在 Index.js 里写：

import './x.js'
import png from './assets/1.jpg'
const div = document.getElementById('app')
div.innerHTML = `
<img src="${png}">`

然后再 yarn start 就可以在生成的页面里看到图片了

目标十一：用 webpack 懒加载

怎么实现一个懒加载

1. 用 import 括号 里面写加载的文件
2. 然后会得到一个 promise
3. promise.then()有两个函数，第一个函数里写如果执行成功做什么，第二个函数写如果执行失败做什么

举例：
首先我们准备一个 lazy.js:

export default function lazy() {
  console.log("我是一个懒加载的模块");
}

然后在 index.js 里写：

const button = document.createElement('button')
button.innerText = "懒加载"
button.onclick = () => {
    const promise = import('./lazy')

    promise.then((module) => {
        const fn = module.default; fn()

        console.log(module)
    }, () => { console.log('模块加载错误') })

}
div.appendChild(button)