webpack4.x基础介绍第一节

傷城~ 2022-05-28 12:10 169阅读 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"
          }
        }

[20180404213637915]: /images/20220528/8ed4ae7fd4514d83b9a4a891580472b9.png
[20180404213652586]: /images/20220528/1f19873959154bc3857507959c3a53c9.png
[20180404213658860]: /images/20220528/d8ff4587528b42de9693924e3d7cae29.png
[20180404213704373]: /images/20220528/623670fb438c4a74b2fb94a2145c3fb8.png