webpack 下 （含面试题）

面试题：loader（加载器） 和 plugin（插件） 的区别

loader 是文件加载器，能够加载资源文件；比如说：它可以加载js文件，把js文件转译成低版本浏览器可以支持的js,用来加载css文件，可以把css文件变成页面上的style标签或者其他的一些处理，还可以加载图片文件，对图片进行一些优化；

plugin是插件 ，plugin赋予了webpack各种灵活的功能，比如说有一个插件叫HtmlWebpackPlugin，是用来生成一个html文件的，还有一个叫做MiniCssExtractPlugin，它是用来抽取css代码的把它变成一个文件的；

loader是一对一，plugin是多对一，这是二者的区别 。

1. 引入scss

webpack sass loader (下载dart-sass)

yarn add sass-loader dart-sass --dev (这个报错了，换下一个)

npm install sass-loader dart-sass --dev

遇见工具报错的，两种解决办法：1.源 (npm) config get registry 出现地址则没问题
2.换工具

把后缀改成scss就是scss了，再配置一下，有错找解决方法

2. 引入 LESS 和 Stylus

webpack less-loader

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

3. 使用 file-loader 引入图片

yarn add file-loader --dev

4. webpack import() 懒加载

一开始不加载，点击才加载，用import，promise实现

配置文件

5. 一键部署github pages

预览地址：上传dist 或 建新的分支：

git branch gh-pages
git checkout gh-pages
ga .
gc -m ''
mv dist/* ./    //将dist目录内容拷贝到当前目录
rm -rf dist
gst    //记得有啥看一眼
ga .
gc -m 'create website'
git push
git push --set-upstream origin gh-pages   //这句应为复制上一句的回应

git reset --hard HEAD    //误删代码，重置用

这样操作太麻烦？写个脚本。 gc0 main //回到分支

// 项目里创建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 //运行