webpack4.x基础介绍 第一节

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

首先我们了解webpack是什么？

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

安装官网的解释

我们可以看到显示的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"
      }
    }