webpack安装下

2021-02-24  本文已影响0人  卢卢2020

webpack loader 和plugin的区别是什么?

loader:加载器=>加载文件 (load文件)

plugin:插件=>加强功能  plugin的功能更加丰富不仅局限于资源的加载

安装sass-loader


参照github链接

npm install sass-loader sass webpack --save-dev //安装

安装less-loader


参照github链接

npm install less less-loader --save-dev  //安装

安装stylus-loader


参照github链接

npm install stylus stylus-loader --save-dev //安装命令

webpack引入图片


参照github链接

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的文件名字

上一篇 下一篇

猜你喜欢

热点阅读