【jeecg-boot项目开发crm】：平台技术点——day03【 Node.js 入门、ES6基础、Npm 命令、Babel、模块化、Webpack】：狂神教程

本文链接：https://blog.csdn.net/qq_40572023/article/details/121223621

本文档介绍了Node.js的基础知识，包括安装、创建HTTP服务器以及操作MySQL数据库。同时，深入讲解了ES6的新特性，如let和const命令、模板字符串、函数默认参数、箭头函数、对象初始化简写、传播操作符、数组map和reduce方法。此外，还探讨了模块化、NPM、Babel、Webpack及其在实际开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

狂神教程文档

一、Node.js

1.1 Node.js介绍与安装

目标：了解nodejs、并且在本地安装好这个软件

官网： http://nodejs.cn/

一路安装，cmd中输入node -v，如果能出来版本号就证明安装成功了
并且，新版本安装后会自带npm，也可以输入npm -v，来查看

介绍：

Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。
简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。底层架构是：javascript. 文件后缀：.js
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

1.2.2、Node - 实现请求响应

创建httpserver.js

// 导入模块是require 就类似于import java.io 
const http = require('http');	//*****
// 1: 创建一个httpserver服务
http.createServer(function(request,response){
    // 浏览器怎么认识hello server!!! 
    response.writeHead(200,{'Content-type':'text/plain'}); //这句话的含义是：告诉浏览器将
    // 以text-plain去解析hello server 这段数据。
    // 给浏览器输出内容
    response.end("<strong>hello server!!!</strong>");
}).listen(8888);
console.log("你启动的服务是：http://localhpst:8888以启动成功!!");
// 2: 监听一端口8888
// 3: 启动运行服务 node httpserver.js
// 4: 在浏览器访问http://localhost:8888

运行服务器程序；
node httpserver.js
停止服务是ctrl + c

1.2.3、Node-操作MYSQL数据库【了解，学习里面安装第三方依赖的模块】

官方文档没有mysq的模块
需要自己去依赖对应的模块（第三方的）
参考：https://www.npmjs.com/package/mysql
1：安装mysql依赖
npm install mysql：就会下载到前端项目目录中node_modules下

在这里插入图片描述

二、ES6

2.1、ES6的概述

在这里插入图片描述

制定JavaScript规范，标准和语法的组织，这些组织是浏览器的厂商（谷歌，火狐等等）

ECMAScript的快速发展：

在这里插入图片描述

ES6前是Jquery的天下。
ES6: 是JavaScript语言的下一代标准，2015年6月正式发布。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

小结：

ECMAScript是前端js的语法规范；可以应用在各种js环境中。如：浏览器或者node.js环境。
它有很多版本：es1/2/3/5/6，很多新特性，可以在js环境中使用这些新特性。
新技术的学习只是提高我们的开发效率

2.2、ES6的语法：let和const命令

原来变量和常量都是var
变量和常量的严格区分（改进）。

let：变量
const：常量

核心代码：

创建一个ES6文件夹，新建E:\study\ES6\01-let和const定义.html如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        //传统定义变量和常量的方式，var
        var name = "海马体";
        var link = "http://www.ceeeeb.com";
        var PI = Math.PI;
        console.log(name);
        console.log(link);
        console.log(PI);

        //ES6定义的方式
        let name2 = "海马体";
        let link2 = "http://www.ceeeeb.com";
        console.log(name2);
        console.log(link2);

        //定义常量
        const PI2 = Math.PI;
        console.log(PI2);

    </script>
</body>
</html>

运行如下：

直接用浏览器打开之后，按F12即可在console中看到结果

注：启动默认模板`! + space`就可以创建

如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

let，const和var的区别

let和const解决var的变量穿透问题，和常量修改的问题

变量穿透问题的演示

 for(var i = 0; i < 5; i++){
     console.log(i);
 }
 //这里结果是5，就造成了变量穿透
 console.log(i);

在这里插入图片描述
解决：就是将var改为let，这样编译之后就会报错

 for(let i = 0; i < 5; i++){
     console.log(i);
 }
 //这里结果是5，就造成了变量穿透
 console.log(i);

在这里插入图片描述
2. 常量修改问题（正常比如PI常量修改它没有任何意义，但是var可以修改）

//2常量修改的问题的演示
var PI = Math.PI;
PI = 100;
console.log(PI);

在这里插入图片描述

这里就将PI修改成了100
解决：用const代替var，这样编译之后就会报错

const PI = Math.PI;
PI = 100;
console.log(PI);

在这里插入图片描述
完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        //let和const解决var的变量穿透问题，和常量修改的问题
        //1变量穿透问题的演示
        // for(let i = 0; i < 5; i++){
        //     console.log(i);
        // }
        // //这里结果是5，就造成了变量穿透
        // console.log(i);

        //2常量修改的问题的演示
        const PI = Math.PI;
        PI = 100;
        console.log(PI);
    </script>
</body>
</html>

小结

let ：可变变量；块级作用域
const：常量
var：只有全局作用域和函数作用域概念，没有块级作用域的概念。
在实际开发和生产中，如果是小程序，uniapp或者一些脚手架中，可以大胆的去使用let和const
但是做web开发，建议使用var，因为一些低版本的浏览器还是不支持let和const
什么是块级作用域

2.3、ES6的语法：模板字符串

解决以前：动态部分与静态部分拼接的问题
以前：我们都是使用 ‘’ 或者 “” 来把字符串套起来
现在： `` 【反引号】
在这里插入图片描述
第一个用途：动态部分与静态部分拼接的问题

ES6反引号(``)直接搞定。
将表达式嵌入字符串中进行拼接。用${}来界定。

代码：

<body>
    <script>
        //字符串会涉及到动态部分
        //动态部分
        var people = {
            name : "hippo",
            address : "银川",
            http : "www.ceeeeb.com"
        };
        //静态部分
        let explore = "传统--我的名字是"+ people.name +"，住在"+ people.address +"，我的网址是"+ people.http+"。";
        console.log(explore);
        
        //ES6的模板字符串的语法【类似java中的el表达式】
        let exploreE = `ES6--我的名字是${people.name}，住在${people.address},我的网址是${people.http}。`;
        console.log(exploreE);
    </script>
</body>

结果：
在这里插入图片描述
第二个用途：可以直接实现换行操作
代码：

结果：

2.4、ES6的语法：函数默认参数与箭头函数

函数默认参数

在方法的参数后面加上一个默认值即可
原因：不加的话默认是undefined，如果传参是两个值，只传了一个就会出现问题。

<body>

    <script>
         默认参数 给参数列表设定初始值
        function sum(a = 100, b = 100){ //a，b的默认值是undefined
            console.log(a + b);
        }
        // 执行方法，会用默认值填充，打印出来200
        var result = sum();
        // 覆盖默认值打印  结果是300 
        var result = sum(100, 200);
    </script>
    
</body>

运行如下：
在这里插入图片描述

箭头函数【重点】

在未来的项目开发中，比如小程序，unipp，一些常见的脚手架会大量的使用
它也是一种函数的定义，它简化定义仅此而已。
注：和Java的Stream流很像，但是箭头函数是=>，Stream流是->

步骤：
1：去掉function
2: 括号后面加箭头
3: 如果逻辑代码仅有return可以直接省去。
4：如果参数只有一个，可以把括号省去

<body>
    
    <script>
        //箭头函数
        var sum = function(a, b){
            return a + b;
        }

        //改进1
        var sum = (a, b) => {
            return a + b;
        }

        //改进2
        var sum = (a, b) => a + b;

        //通过上面的例子找到的规律
        //1.去掉function
        //2.在括号后面加箭头
        //3.如果逻辑代码仅有return可以直接省去。（如果是逻辑体，就不能省略），比如：
        var sum = (a, b) => {
            var num = a + b;
            return num;
        }
        //4.如果参数只有一个，也可以把括号省去（如果是参数，就不能省略）,比如：
        var minu = (a, b, c) => a+b+c;
        //原来是
        var minu = function(a, b, c) {
            return a+b+c;
        }

        //实际应用举例
        var arr = [1, 2, 3, 4, 5];
        // var newArr = arr.map(function(obj){
        //     return obj * 2;
        // });
        // console.log(newArr);
        //改变之后
        var newArr = arr.map(obj => obj * 2);
        console.log(newArr);

    </script>
</body>

2.5、ES6的语法：对象初始化简写

它是指：如果一个对象中的key和value的名字一样的情况下可以定义成一个。

步骤：ES6简写对象
注：因为对象是key: value 存在的

如果key和变量的名字一致，可以只定义一次即可
如果value是一个函数，可以把: function全部去掉，只剩下()即可
代码：

<body>
    
    <script>
        //这就是一个基本的对象
        let info = {
            title: "hippo",
            http: "www.ceeeeb.com",
            go: function(){
                console.log("对象中的函数");
            }
        };

        //ES6简写对象
        //因为对象是key: value 存在的
        //1. 如果key和变量的名字一致，可以只定义一次即可
        //2. 如果value是一个函数，可以把`: function`全部去掉，只剩下()即可
        var title = "hippo";    //将这个变量赋给对象
        let info2 = {
            title,
            http: "www.ceeeeb.com",
            go(){
                console.log("对象中的函数");
            }
        };

        //结果：
        console.log(info2);
        console.log(info2.title);
        console.log(info2.http);
        info2.go();
    </script>
</body>

结果：
在这里插入图片描述

对象简写的案例

<body>
    
    <form action="">
        <p>账号：<input type="text" id="account"></p>
        <p>密码：<input type="text" id="password"></p>
        <p><input type="button" value="登录" id="loginbtn"></p>
    </form>

    <script>
        //拿到按钮对象，给它绑定一个点击事件
        //document.getElementById("loginbtn").onclick = function(){
        //}

        //Jquery方式
        $("#loginbtn").on("click", function(){
            var account = $("#account").val();
            var password = $("#password").val();
            //这是原来的方式
            var params = {account:account, password:password};
            //ES6可以简写
            var params = {account, password};
            //执行异步请求
            $.ajax({
                type: "post",
                url: "xxx",
                data: params,
                //这是原来的方式
                // success: function(){

                // }
                //ES6简写方式
                success(){

                }
            })
        });

        //在比如
        var vue = new vue({
            //原来的方式
            // created: function(){

            // }
            created(){

            }
        })
    </script>
</body>

2.6、ES6的语法：对象解构

对象解构 —- es6提供一些获取快捷获取对象属性和行为方式
是将对象展开的一种行为

对象是key : value存在，传统获取对象属性和方法的方式有两种

通过.
通过[]
问：为什么对象取值要提供两种方式？

ES6对象解构—其实就是一种快速获取对象属性和方法的形式
以上三种方式都可以用，就看你喜欢什么方式

代码：

<body>
    
    <script>
        //对象是key : value存在，获取对象属性和方法的方式有两种
        //1. 通过.
        //2. 通过[]
        var title = "hippo";    //将这个变量赋给对象
        let info2 = {
            title,
            http: "www.ceeeeb.com",
            go(){
                console.log("对象中的函数");
            }
        };
        //通过.的方式，获取对象属性和方法
        console.log(info2.title);
        console.log(info2.http);
        info2.go();
        //通过[]的方式，获取对象属性和方法
        console.log(info2["title"]);
        console.log(info2["http"]);
        info2["go"]();

        //ES6对象解构---其实就是一种快速获取对象属性和方法的形式
        var {title, http, go} = info2;
        //输出解构出来的属性与方法
        console.log(title, http);
        go();
        //还原代码
        //var title = info2.title;
        //var http = info2.http;
    </script>
</body>

2.7、传播操作符【…】

把一个对象的属性传播到另外一个对象中

注：等同于ES6常用的语法文章里面的Spread Operator 展开运算符

注：在一个对象中，如果解构出来的数据已经被取走的话。这时候用传播操作符，就会把剩下的全部给我们新定义的对象
代码：

<body>
    <script>
        //对象传播操作符...
        var person = {
            name: "hippo",
            address: "银川",
            http: "http://www.ceeeeb.com",
            phone: 123456,
            go(){
                console.log("开始上班了");
            }
        };
        //对象解构出来
        var {name, address,...person2} = person;
        console.log(name);
        console.log(person);
        console.log(person2);
    </script>
</body>

结果：
在这里插入图片描述

传播操作符的案例

<body>
    <script>
        //java后台
        //数据格式：var userPage = {pages: 10, users: [{}, {}, {}], pageNo: 1, pageSize: 100, total: 100};
        //异步请求
        $.post("user/search", function(res){
            res = {pages: 10, users: [{}, {}, {}], pageNo: 1, pageSize: 100, total: 100};
            var userPage = {pages: 10, users: [{}, {}, {}], pageNo: 1, pageSize: 100, total: 100};
            //正常开发快速获取对象属性和方法的形式
            var {pages, users, pageNo, pageSize, total} = userPage;
            //当你准备把剩下的对象给另一个对象的场景时候使用
            var {users,...userPage2} = userPage;
        })
    </script>
</body>

2.8、数组map和reduce方法使用(了解)

讲解：数组中新增了map和reduce方法。

map()

数组中map方法的应用场景

自带循环,并且会把处理的值回填对应的位置
实际开发中，临时给对象添加一个属性。

map()

方法可以将原数组中的所有元素通过一个函数进行处理并放入到一个新数组中并返回该新数组。

举例：

<body>
    <script>
        //要对每个数组元素*2
        let arr = [1, 2, 3, 4];
        //传统方式
        let newArr = [];
        for(let i = 0; i < arr.length; i++){
            newArr.push(arr[i] * 2);
        }
        console.log(newArr);

        //map的方式--自带循环,并且会把处理的值回填对应的位置
        // var newArr2 = arr.map(function(ele){
        //     return ele * 2;
        // })
        //简写方式
        var newArr2 = arr.map(ele => ele * 2);
        console.log(newArr2);

        //map处理对象的数据
        var users = [{age: 10, name: "小学"}, {age: 12, name: "中学"}, {age: 15, name: "大学"}];
        // var newUsers = users.map(function(ele){
        //     ele.age = ele.age + 1;
        //     return ele;
        // });
        //简写
        var newUsers = users.map(ele =>{
            ele.age = ele.age + 1;
            ele.check = true;
            return ele;
        })
        console.log(newUsers);
    </script>
</body>

reduce()

为数组扩展的一个非常典型的方法

reduce(function(),初始值（可选）) ：

接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：

第一个参数是上一次reduce处理的结果
第二个参数是数组中要处理的下一个元素
reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

代码：

<body>
    <script>
        /*********************************reduce*********************/
        //reduce 计算方法
        //计算过程
        //a = 1, b = 2 3
        //a = 3, b = 3 6
        //a = 6, b = 4 10
        //....
        let arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        // 箭头写法 -- 1到10相加 
        var result = arr2.reduce((a, b) => a + b);
        // 原始写法  -- 1到10相加
        //var result = arr2.reduce(function(a,b){
        //    return a+b;
        //})
        console.log(result);
        /*********************************end reduce*********************/
    </script>
</body>

2.9、import 和 export

import导入模块、export导出模块


//全部导入
import people from './example'
 
//有一种特殊情况，即允许你将整个模块当作单一对象进行导入
//该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())
 
//导入部分
import {name, age} from './example'
 
// 导出默认, 有且只有一个默认
export default App
 
// 部分导出
export class App extend Component {};

导入的时候有没有大括号的区别是什么。下面是我在工作中的总结：

1.当用export default people导出时，就用 import people 导入（不带大括号）
 
2.一个文件里，有且只能有一个export default。但可以有多个export。
 
3.当用export name 时，就用import { name }导入（记得带上大括号）
 
4.当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age } 
 
5.当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as example

2.10、Promise

在promise之前代码过多的回调或者嵌套，可读性差、耦合度高、扩展性低。通过Promise机制，扁平化的代码机构，大大提高了代码可读性；用同步编程的方式来编写异步代码，保存线性的代码逻辑，极大的降低了代码耦合性而提高了程序的可扩展性。

说白了就是用同步的方式去写异步代码。

详细文章

2.11、Generators

生成器（ generator）是能返回一个迭代器的函数。生成器函数也是一种函数，最直观的表现就是比普通的function多了个星号*，在其函数体内可以使用yield关键字,有意思的是函数会在每个yield后暂停。

这里生活中有一个比较形象的例子。咱们到银行办理业务时候都得向大厅的机器取一张排队号。你拿到你的排队号，机器并不会自动为你再出下一张票。也就是说取票机“暂停”住了，直到下一个人再次唤起才会继续吐票。

详细文章

2.12、ES6写的script代码可以通过Node.js运行

上面写的所有script的代码，可以直接创建一个js文件，输入node 01来运行
举例：
原来的代码：
01-let和const定义.html

<body>
    
    <script>
        //传统定义变量和常量的方式，var
        var name = "海马体";
        var link = "http://www.ceeeeb.com";
        var PI = Math.PI;
        console.log(name);
        console.log(link);
        console.log(PI);

        //ES6定义的方式
        let name2 = "海马体";
        let link2 = "http://www.ceeeeb.com";
        console.log(name2);
        console.log(link2);

        //定义常量
        const PI2 = Math.PI;
        console.log(PI2);

    </script>
</body>

创建一个新的文件：01.js

//传统定义变量和常量的方式，var
var name = "海马体";
var link = "http://www.ceeeeb.com";
var PI = Math.PI;
console.log(name);
console.log(link);
console.log(PI);

//ES6定义的方式
let name2 = "海马体";
let link2 = "http://www.ceeeeb.com";
console.log(name2);
console.log(link2);

//定义常量
const PI2 = Math.PI;
console.log(PI2);

在终端输入：node 01
在这里插入图片描述

三、Npm

3.1、Npm的概述

官方网站：https://www.npmjs.com/

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于后端的Maven 。

作用：
快速构建nodejs工程
快速安装和依赖第三方模块。比如 npm install mysql redis 等等

注：这个简单，就是一个Node.js的包管理工具，具体看开头教程文档里。

四、Babel【具体看开头教程文档】【常用Babel编译】

4.1、简介

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。——也就是代码降级

4.2、安装

4.3、Babel的使用【实际开发用：vue cli 模式】

初始化项目

npm init -y

创建文件 src/xxxx.js ，是一段ES6代码
配置 .babelrc

{
    "presets": ["es2015"],
    "plugins": []
}

安装转码器，在项目中安装

npm install --save-dev babel-preset-es2015

【自定义运行脚本】，package.json中增加”build”

{
    // ...
    "scripts": {
       "build": "babel src -d dist"
    }
}

执行命令转码

npm run build

运行程序

node dist/userComponent.js

问题：安装转换器的作用
在这里插入图片描述

注：2015也有一些别的转换的东西，程序通过.babelrc配置文件知道

【实际开发一般】：【自定义运行脚本】，package.json中
详细内容：vue cli 模式与环境变量
前端多环境构建配置
在这里插入图片描述

五、模块化【具体看开头教程文档】

5.1、简介
模块化产生的背景

随着网站逐渐变成”互联网应用程序”，嵌入网页的Javascript代码越来越庞大，越来越复杂。

Javascript模块化编程，已经成为一个迫切的需求。**理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。**但是，Javascript不是一种模块化编程语言，它不支持”类”（class），包（package）等概念，也不支持”模块”（module）。

模块化规范：
CommonJS模块化规范【比较常用】

创建“module”文件夹
创建 mokuai-common-js/四则运算.js

// 定义成员：
const sum = function(a,b){
    return a + b
}
const subtract = function(a,b){
    return a - b
}
const multiply = function(a,b){
    return a * b
}
const divide = function(a,b){
    return a / b
}

导出模块中的成员

// 导出成员：
module.exports = {
    sum: sum,
    subtract: subtract,
    multiply: multiply,
    divide: divide
}


//简写
module.exports = {
    sum,
    subtract,
    multiply,
    divide
}

创建 mokuai-common-js/引入模块.js

//引入模块，注意：当前路径必须写 ./
const m = require('./四则运算.js')

console.log(m)
const r1 = m.sum(1,2)
const r2 = m.subtract(1,2)
console.log(r1,r2)

运行程序

ES6模块化规范【1】【了解】

ES6使用 export 和 import 来导出、导入模块。
注意：这时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。

ES6模块化规范【2】【常用】

ES6使用 export 和 import 来导出、导入模块。

导出的写法：
在这里插入图片描述

导入的写法：在这里插入图片描述

六、Webpack【具体看开头教程文档】

官网：https://webpack.github.io/
中文网：https://webpack.docschina.org/

6.1、什么是Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
在这里插入图片描述

小结：webpack把我们源码的细节进行隐藏，将所有的js合并成一个js（进行加密和压缩），对我们浏览器的访问速度和安全性会变得更高。

6.2、Webpack安装

全局安装;
npm install -g webpack webpack-cli
查看
webpack -v

6.3 初始化项目【看教程文档】

在这里插入图片描述
注：重点是这个入口函数，作用就是将我们的各种包统一汇总。

6.4 JS打包

在这里插入图片描述
1、webpack目录下创建配置文件webpack.config.js

//Node.js内置模块
const path = require("path");

//定义打包规则
module.exports = {
    // 1： 入口函数从哪里开始进行编译打包
    entry: './src/main.js', //配置入口文件
    // 2：编译成功以后把内容输出到哪里去
    output: {
        // 定义输出的指定的的目录 __dirname当前目录根目录，产生一个dist文件夹
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        // 合并的js文件存储在dist/bundle.js文件中
        filename: 'bundle.js' //输出文件
    }
}

以上配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

问题：定义输出的指定的的目录时小细节

./dist目录没有要求，随便放
__dirname是Node.js里的一个常量，说白了就是得到webpack当前的根目录

2、命令行执行编译命令
webpack
在这里插入图片描述

除了webpack还有一些命令，可以通过webpack -h查看
* 比如：webpack -w：对代码进行实时的监听，改了哪里就自动打包了

6.5、Css打包【实际开发中看自己项目需要打包什么就去官网查找】

前面我们用Webpack对JS打包合并

1、安装style-loader和 css-loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器。

首先我们需要安装相关Loader插件

css-loader 是将 css 装载到 javascript
style-loader 是让 javascript 认识css

npm install --save-dev style-loader css-loader

2、修改webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {
    //...,
    output:{
        //其他配置
    },
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

3、在src文件夹创建style.css