9-3 Webpack（框架图、引入SCSS、LESS、Stylus、引入图片、懒加载）

如何使用 webpack

框架图

• loader转换是1对1
• plugin插件转换可以是n对1
• webpack内置打包JS文件，但其他的CSS需要自己下载
  
• loader和plugin的区别是什么？
  1.翻译一下：loader就是加载器，plugin就是插件
  2.中文解释：加载器就是用来load（加载）一个文件，比如说babel-loader就是用来加载高级的JS把它变成低版本浏览器支持的JS，css-loader和style-loader是用来加载CSS，然后把它变成页面上的标签，还可以加载图片文件，对图片进行一些优化；插件就是用来扩展webpack功能的，比如HTML webpack plugin用来生成HTML文件，MiniCss Extract Plugin 是用来抽取CSS代码将其合并成一个CSS文件的。
  总之，loader的功能比较单一，就是用来加载文件，而plugin的功能更加丰富。

6.用webpack引入 SCSS

• node-sass已经过时
• 使用 dart-sass

6.1 引入

• 文档
• 安装：yarn add sass-loader dart-sass --dev
• 安装之后就可以引入一个scss文件
  1.scss文件就是直接把任意一个css文件后缀改成scss（可以认为s是super的意思，超级css）
  2.JS中的引入路径后缀也改为scss
• 在 config base中添加
  其中有style-loader说明是在页面中添加style标签

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

• config文件和config prod文件中添加一句：...base.module.rules,
  引入rule然后覆盖需要修改的部分

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

• 运行：yarn start

7.用webpack引入 LESS和Stylus

• SASS、LESS、Stylus完全没区别

7.1 引入LESS

• 文档
• 把css文件后缀改为less，JS中import也要改
  因为：这两种语言都是兼容CSS的
• 安装：yarn add less-loader --dev
• 安装less：yarn add less --dev
• 将代码放到base里的rules中
  sass-loader：把sass转化为CSS代码
  css-loader：把CSS转化为JS的字符串
  style-loader：把JS字符串转化为style标签

{
        test: /\.less$/i,
        loader: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },

• 运行：yarn start
• 报错：在调试loader和plugin出现以下报错
  这是说明webpack和该loader和plugin的版本不匹配，复制以前devDependencies版本内容到package.json文件，再yarn install，重运行yarn start

Invalid configuration object. W has been initialized using a configuration object that does not match the API schema.

• less语法
  和CSS异曲同工，就是声明一个变量color然后用这个变量

@color: red;
body{
    background: @color;
}

7.2 引入Stylus

• 新建一个Stylus文件：z.styl
  新建之后会有提示，默认不支持，需要安装一个扩展，点击安装第一个就行
• Stylus语法：用CSS语法，一样可以兼容

c = red;
body{
    background: c;
}

• 引入和CSS文件一样
• 文档
• 安装：yarn add stylus stylus-loader --dev
• base的rules数组中添加对象：

      {
        test: /\.styl$/,//以.开头，l结束，$是结束的意思
        loader: [
          // compiles Styl to CSS
          "style-loader",
          "css-loader",
          "stylus-loader",
        ], 
      },

8.用webpack引入图片

• 万物皆可JS

1.引入图片

• 在index.js中引入图片

const div = document.getElementById('app')
div.innerHTML = `
<img src="./assets/lm.png">
`

• 图片引入成功却无法显示
  因为：因为目前的server不是src目录，而是dist目录
• 解决：
  1.index.js中引入png
  2.为png配一个loader，loader会为png命名给路径
  3.在img标签的路径中插入PNG即可：src="${png}"
• 代码：
  看起来像加载的文件，实际上加载的是路径

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

• base：
  file-loader：把文件变成文件路径

      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        use: 'file-loader',
      },

9.懒加载

• 该做的时候不做，等到不得不做的时候才做
• 为什么要懒加载
  答：因为某个JS可能很大，或者不想一开始就加载
• 加个按钮：当点击按钮的时候才去加载某个JS
  lazy.js记得要导出：export default function lazy(){}

const button = document.createElement('button')
button.innerText = '懒加载'
button.onclick = ()=>{
    const promise = import('./lazy')//引入JS文件
    promise.then((module)=>{
        const fn = module.default //模块的默认值
        fn()
    },()=>{})
}
div.appendChild(button)

• 如何实现懒加载：
  1.用import()取加载这个文件（把import当做函数）然后会得到一个promise
  2.promise前面写成功之后调用函数，后面写失败之后做什么
• promise
  它后面可以接一个then，可以接成功函数和失败函数