webpack4.x基础介绍第一节-蒲公英云

webpack4.x基础介绍第一节

傷城~ 2022-05-28 12:10 280阅读 0赞

官网： http://webpack.github.io/

首先我们了解webpack是什么？

前端工程师，必不可少的工具.

安装官网的解释

20180404213637915

20180404213652586

20180404213658860

20180404213704373

我们可以看到显示的bundle your assets,bundle your images,bundle your script,bundle your style,说白了bundle就是打包的意思.
bundle your assets 打包你的静态资源
bundle your images 打包你的图片
bundle your script 打包你的脚本文件
bundle your style 打包你的样式文件

所以webpack说到底就是一个打包工具,打包模块用的,也就是模块打包器。

本次教程介绍的是webpack4.1.0的版本。

前端中热门的两款框架(vue/react)的脚手架就是基于webpack的.

webpack作用

1.打包(依赖)

【在之前我们web前端开发中总是会引各种的js文件,而且你的文件位置稍微动一下就挂掉了,而引的script文件一般都会引十个八个的,一般A工程师引了十个文件,那么B工程师接受这个项目时,他是不敢把这个十个文件给删了的,他只能增加一些文件;而在webpack的主要作用是打包,它可以自动以模块的概念,比如你依赖A、B、C…等,最后我整体给你打包成一个文件】

简单的说就是她可以把多个文件打包成一个JS文件。它有好处也有坏处,好处是比如说在之前多个文件你要发很多请求,而打包成一个文件,你只要发一个请求就可以了,可以减少服务器的压力和带宽。

2.转化

我们知道前端文件都是运行在浏览器上的,而浏览器支持的文件格式很少,而平时的开发可能会用到Less/sass/typeScript等,这时Less/sass需要转成CSS,typeScript要转成js,这时就需要使用到webpack里面的loader了。

3.优化

(现在的前端和以前相比变化很大,现在以前的前端页面等文件都是很小的;而现在不一样了,SPA单页应用的流行起来,那么对应着前端项目的复杂度就高了,那么一些机械的操作就需要借助工具来完成了,比如说压缩代码和图片等,那么现在这些工作可以交给webpack来完成,你可以利用webpack来优化你的项目)

webpack的构成
1.入口 entry
2.出口 output
3.loader 转换器
4.plugins 插件
5.devServer 开发服务器
6.mode 模式(开发环境/生成环境)

-———————————————————————————————————-

前提：必须装好了node环境,建议6.00版本以上.(nodejs.org)

第一步：安装webpack-cli

npm install webpack-cli -g //全局模式安装  
或  
yarn add webpack-cli -g  
npm install --save-dev webpack  
验证webpack环境已经安装好了?  
输入  
webpack -v  
如果现实版本号,那么说你安装成功了.

开发环境(develepment)：说白了就是你写代码的环境

生产环境(production): 项目开发完毕,部署上线
-————————————————————

安装命令介绍

npm install 安装,可以简写成 npm i  
如安装JQuery, 即： npm i Jquery  
npm uninstall 卸载,可以简写成 npm un

在平时通常我们的项目有个package.json,这个是项目配置文件.

按win+R键,输入cmd打开控制台,cd 目录名,在进入项目目录,在控制台输入

npm init -y 即可生成这个文件.

下面介绍—save-dev和—save有什么区别?如：
npm install jquery —save-dev
npm install jquery —save

--save-dev 表示开发的时候用的,可以简写成 -D,如：
npm install jquery -D

--save表示放入生产环境的,可以简写成 -S,

package.json简单介绍,【注意package.json文件里面不允许有注释,我这里只是为

{
      "name": "webpack4", //项目介绍
      "version": "1.0.0", //版本
      "description": "",  // 描述
      "main": "index.js", 
      "scripts": { //执行脚本
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [], //关键字
      "author": "",   // 作者
      "license": "ISC",
      "devDependencies": { //开发环境依赖包
        "jquery": "^3.3.1"
      },
      "dependencies": { //生产环境依赖包
        "jquery": "^3.3.1"
      }
    }