2-webpack基本使用 2-webpack基本使用

这里版本对比/问题/解决方法/概念/安装/使用
https://www.webpackjs.com/guides/installation/

文章图片
image.png
一.问题
【2-webpack基本使用】在一个index.html文件中会引入许多css,js,images,fonts,文件,每次遇到src都会向服务器发送一次请求,这样项目的执行效率是非常低的
二.解决方法
所以在正式部署应用程序之前,我们会将js,css文件合并到一个文件中,会把images组成精灵图,会压缩代码,来减少请求资源次数,提升应用程序执行效率,但是自己做压缩,合并是非常麻烦的,所以诞生了前端构建工具帮我们做这些事
三.什么是webpack(项目打包工具)
webpack是基于Node.js的前端项目构建工具,可以很好的帮助我们打包压缩项目,省去了过去很多繁琐的操作,提升项目的执行效率
四.安装webpack
通过npm安装即可
webpack3:
npm i -g webpack
webpack4:
npm i -g webpack
npm i -g webpack-cli
但是在全局安装成功后,最好在局部也安装,因为有些插件需要依赖局部webpack才能安装
在项目文件夹下
npm init(因为是依赖npm安装的,所以要初始化npm项目,记录包)
npm i webpack
五.使用webpack
原始:
我们会将所有js文件一个一个的导入index.html中
现在:
我们在webpack(node)的入口文件中通过ES6提供的import语法,将所有js文件导入到一个js文件中,然后在index.html中导入入口js文件index.js
import 别名 from "包名称"
问题:
由于import语法太高级,浏览器无法识别所以报错
解决方法:
通过webpack把index.js编译程浏览器可以识别的低级语法导入index.html文件中
在项目文件夹下运行:
webpack4:
webpack --mode development
webpack --mode production
webpack3:
webpack ./src/index.js ./dist/bundle.js
六.代码测试

搭建项目文件目录

文章图片
image.png
局部安装webpack4
- npm init(所有通过npm管理包的项目都要初始化)
- npm i webpack
- npm i webpack-cli
- npm i jquery -D
- webpack --mode development(将浏览器无法识别的高级语法打包)
  
  文章图片
  image.png
  
  文章图片
  image.png
  
  文章图片
  image.png

2-webpack基本使用

推荐阅读

美播直播怎么放音乐？美播直播放音乐方法教程

大货车查违章哪个软件最准确查违章哪个好

治安调解的原则有哪一些

财富贷是真的吗财富贷可靠吗

招财猫怎么放，招财猫怎么放置

梦幻西游不pk有必要带龟速吗梦幻西游龟速和配速哪个好

跨境电商行业报告面试为什么选择跨境电商这个行业，跨境电商行业的发展趋势

edius怎么添加特效素材 edius给立体素材加特效的图文操作方法

游子吟中运用对偶的手法的诗句是

大卷烫发怎么打理好看大脸如何打理头发，大卷头发怎么打理视频

取名诺诺的寓意是什么

一个刚入职的公务员一年能收入多少？

抖音蘑菇头我要送你99朵玫瑰花动态表情包分享

齐河物流园分拣员怎么样,快递从早上6点到晚上9点每天派送千余件

赫曼陆龟能长多大小于多少很容易生命危险

皮沙发长霉斑可以用什么洗掉，真皮沙发有霉斑怎么清洗

初中总分多少分上a班初中最多多少分

终其一生

箭牌洁具的价格表箭牌单功能卫浴单价

知柏地黄丸有4大妙用知柏地黄丸的作用与功效！