一. webpack loader和plugin区别

经典面试题，先翻译英文，再具体举例子

webpack loader是加载器，用于加载文件。比如webpack内置的babel-loader可以加载JS文件，将高级JS代码转译成低版本浏览器支持的JS。style-loader和css-loader加载css，将css代码变成页面的style标签。也可以加载图片，对图片做一些优化。

webpack plugin是插件，可以扩展webpack的功能。html-webpack-plugin生成html文件，mini-css-extract-plugin可以抽取css代码，变成一个css文件。

loader的功能比较单一，就是加载文件的，plugin的功能更丰富。

二. webpack 引入SCSS

把任何.css文件直接修改文件后缀成.scss，就是一个合法scss文件。

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

安装

yarn add sass-loader dart-sass --dev

配置

不管是开发还是生产，都用同样的配置。所以配置在base里。

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

需要在另外两个配置文件里把这段共用的配置抄过去

module: {
    rules: [
      ...base.module.rules,
      
    ],
},

三. 引入LESS和Stylus

这两种和sass都是css的变种语言。把后缀改成.less就可以

1. LESS

安装

yarn add less-loader --dev

配置

还是配置在base.js里。另两个要...base.module.rules。（loader都是配置在module 里的rules数组里，添加相应的配置即可）

//webpack.config.base.js
{
    test: /\.less$/,
    loader: ["style-loader", "css-loader", "less-loader"],
},

loader数组里的按照写的相反的顺序执行。'less-loader'把less语言转成css语言。'css-loader'把css代码变成js字符串。'style-loader'把js字符串变成style标签。

这时yarn build会报错，说没有安装less。

那就在终端：yarn add less --dev

2. stylus

新建z.styl文件

安装

yarn add stylus-loader stylus --dev

配置

还是配置在base.js里。另两个要...base.module.rules。（loader都是配置在module 里的rules数组里，添加相应的配置即可）

//webpack.config.base.js
{
    test: /\.styl$/,
    loader: ["style-loader", "css-loader", "stylus-loader"],
},

四. 引入图片

在src/assets里引入1.png，通过index.js向页面插入图片

1. 安装loader

npm install --save-dev file-loader

(yarn 安装失败了)

2. 配置

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

3. 代码

要在js文件里操作页面

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

如果没安装file-loader，会发现页面的html里是有img标签的，但是图片并没有出现。因为我们是把src目录里的html插入了图片，但是服务器看到的是dist目录里的。

安装了loader之后，loader会找图片路径，并且加上哈希。所以在js里import的png变量就是图片的路径。

五. 懒加载（面试经常问）

什么时候会用到懒加载？有时候某个js可能会很大，或者不想一开始就加载，

怎么实现懒加载？

用import()动态加载一个文件，会得到一个promise，promise的then方法第一个参数写加载成功做什么，第二个参数写加载失败做什么。

懒加载一个lazy.js文件：

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

在index.js里：

const button = document.createElement("button");
button.innerText = "懒加载";
div.appendChild(button);
button.onclick = () => {
  const promise = import("./lazy.js"); //异步
  promise.then(
    (module) => {
      const fn = module.default;
      fn();
    },
    () => {console.log("模块加载错误")}
  );
};

import()当作一个函数调用，由于是异步，所以会得到一个延迟对象promise。如果加载成功了，then的第一个回调函数，接收lazy.js默认导出的，是一个模块，模块的default属性是默认导出的那个函数，然后调用函数。

有时网站下载的内容可能比实际用到的更多，所以使用懒加载将资源的初始化（加载等）推迟到需要的时候再进行。在页面加载期间不去加载某个代码块，而是推迟到在某些触发条件发生时，再去加载。

六. 部署到Github Page

第一步，本地打包

第二步，上传到github

方法1.

仓库的setting选项里的github page，生成一个网站，在后边加上路径, /dist/index.html，使用dist目录里的html

方法2. 新建一个分支

我不想在预览链接里看到dist，很奇怪。使用分支就不需要上传dist了，

先不提交dist:

原来github仓库里是有dist的，现在我不想上传dist，就先把dist放到.gitignore里，然后删掉dist，提交。再build生成新的dist。然后push

rm -rf dist
git add .
git commit -m 'remove dist'
yarn build  //此时的dist就是没提交的了
git push  //删东西也要push

这时云端就没有dist了，再访问那个预览网页就看不到了。

新建分支：

git branch gh-pages
git checkout gh-pages

然后把除了dist和node_modules（删了还要再下载）和.gitignore，都删掉（手动删除）

git add .
git commit -m 'remove source code'
//把dist里的东西都拷出来
mv dist/* ./        //此时dist就是空的，然后删掉dist
rm -rf dist
//这时目录里的就是网站的根目录了，可以提交了
git add .
git commit -m 'website'

最后git push ，会出来一个提醒，用另外一句话才会成功

git push --set-upstream origin gh-pages

这时就有了两个分支，一个用来写代码，一个用来做预览

github page

和之前一样，在设置里，选择gh-pages分支，给你一个网站，在后边加上.index.html，就可以预览了。但是速度很慢，要等很久。

写一个脚本

git checkout master

在msater里新建一个deploy.sh文件：

yarn build &&
git checkout gh-pages &&
rm -rf *.html *.js *.css *.png &&
mv dist/* ./ &&
rm -rf dist;
git add . &&
git commit -m 'update' &&
git push &&
git checkout -

回到主线，改动代码之后，直接：

sh ./deploy.sh

因为在我们第一次建分支的时候，已经把新分支里的源代码都删除了，所以下次即使在master里改动了代码，build之后，新分支里也不会出现上次删掉的源代码。新分支里还是只有.gitignore，node_modules，上次dist目录里移出来的几个文件，再加上新生成的dist目录。

所以我们切换到新分支之后，先把上次的几个文件删掉，然后把新的dist里的东西掏出来，删掉空的dist，提交代码。

《webpack-2》