2-webpack基本使用

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

image.png

一.问题

在一个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