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
推荐阅读
- 由浅入深理解AOP
- 做一件事情的基本原理是什么（）
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- dubbo基本认识
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件