学习方法

学习任何的都可以直接搜索，选择代码复制并跑起来，再修改代码即可。webpack也是如此

学习任何的东西，都先定一个又一个的小目标

比如：

webpack

目标一：用 webpack 转译 JS

途径

搜索webpack 进入 webpack 官网

目标二：用 webpack 生成 HTML

途径

搜索webpack html，开始找合适的代码copy

目标三：用 webpack 引入 CSS

要点

可以使用 JS 生成 style，也可以把 CSS 抽成文件

途径

搜索webpack css loader进入

搜索webpack css extract plugin进入

常见面试题

webpack 中的 loader 和 plugin 区别

答题思路：

1. 先翻译一遍。 loader是加载器，plugin是插件
2. 中文解释+代码例子。

• loader是用来load文件的，将文件A通过loader转换成文件B，比如说，babelloader是用来加载高级的JS变成低版本浏览器支持的JS，style-loader和css-loader是用来加载css，将它变成页面中的style标签。
• plugin是用来扩展加强功能的。比如HtmlWebpackPlugin是用来生成HTML文件，MiniCssExtractPlugin是抽取CSS代码将它变成一个文件的。

如何实现懒加载

const promise = import("./lazy");
  promise.then(
    (module) => {
      const fn = module.default;
      fn();
    },
    () => {
      console.log("失败了");
    }
  );

用import("./lazy")去加载文件，会得到一个promise，promise的then前面写成功之后做什么，后面写失败之后做什么

一键部署

简单

上传dist目录，用dist目录下面index.html在GitHub的page上面来进行网页预览

高级

使用分支来进行预览，不需要上传dist目录。

步骤

1. 新建分支

git branch gh-pages

2. 进入分支

git checkout gh-pages

目前gh-pages分支和master分支一模一样

3. 除了dist文件夹和.gitignore和node_modules文件夹，剩下的东西全部删掉
4. 提交代码

git status

git add .

git commit -m 'update'

5. 将dist目录里面的东西都拷贝到当前目录

mv dist/* ./

6. 删掉dist

rm -rf dist

7. 提交代码

git status

git add .

git commit -m 'update'

push

8. 在GitHub的page里面选择gh-pages分支作为预览

高级简化步骤

用上面方法每次更改一次都需要走一遍，就很麻烦，可以采用deploy.sh，用脚本来简化部署

1. 回到master分支

git checkout master

2. 新建一个deploy.sh的文件，将要执行的脚本全部按顺序写到里面，以&&连接，以保证先执行上一项后才执行下一项

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

git checkout -是指回到当前分支的上一分支

3. 回到master分支

git checkout master

4. 提交代码

git status

git add .

git commit -m 'update'

5. 同步到云端

git push

这样改动之后要更新就直接提交代码后

git status
git add .
git commit -m 'update'

执行如下代码就可以

sh ./deploy.sh

会自动依次执行刚刚写在脚本里面的脚本代码

在gh-pages分支里面的deploy.sh删掉，里面不需要这个，只需要我们要运行部署用到的文件