webpack loader 和plugin的区别是什么?
loader:加载器=>加载文件 (load文件)
plugin:插件=>加强功能 plugin的功能更加丰富不仅局限于资源的加载
安装sass-loader
npm install sass-loader sass webpack --save-dev //安装
安装less-loader
npm install less less-loader --save-dev //安装
安装stylus-loader
npm install stylus stylus-loader --save-dev //安装命令
webpack引入图片
npm install image-webpack-loader --save-dev
webpack import()懒加载
懒加载:用import()来接收 然后接收到的结果返回一个promise promise.then返回成功函数和失败函数 成功传入 module 然后用module.defaule来接收 链接路径不对时执行失败函数
webpack 一键部署到github
=>>>>两种方法
第一种:
①在.gitignore 中删掉之前隐藏的/dist/ 这句
②重新git add . git commit git push 然后找到github代码预览链接 在后面增加 dist/index.html 点击查看案例预览链接
第二种: 弄之前一个定要保存
分支 主要思路 一个main分支无dist目录上传 增加另一个(links)分支 (只要dist目录用来预览)主要操作如下:
新建一个分支 :git branch links
进入这个分支:git checkout links (保存分支提交)
遇到误删重置: git reset --hard HEAD
复制dist文件里面的所有文件在当前目录 mv dist/* ./
删除dist目录 rm -rf dist
然后上传上分支
用第二种方法方法太麻烦了 有没有简单的方法=====>>>>>>部署脚本
git checkout main //回到主分支
新建一个deploy.sh文件
deploy.sh 文件内容如下:
yarn build &&git checkout links &&
rm -rf *.html *.js *.css *.png &&
mv dist/* ./ &&
rm -rf dist;
git add . &&
git commit -m 'update' &&
git push &&
git checkout - //-相当于回到来的时候的页面(上一级)
运行 :sh ./deploy.sh //后面的为sh的文件名字