Node+Npm+WebPack极速入门

最新推荐文章于 2024-07-28 18:19:21 发布

Dean_xiu

最新推荐文章于 2024-07-28 18:19:21 发布

阅读量218

点赞数

分类专栏：前端框架文章标签： node webpack npm

本文链接：https://blog.csdn.net/Dean_xiu/article/details/111054917

版权

前端框架专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Node.js

Node.js概述

简单的来说，Node.js就是基于JavaScript语言和V8引擎的开源Web服务器项目

简单插播一下V8引擎，非常强悍的JavaScript引擎，可以使js应用在各个领域，如Web、App、桌面端、服务端及IOT
V8主要有着非常重要的四个模块（Parser[负责将js源码转换为Abstract Syntax Tree(AST)]、Ignition[解释器、负责将AST转换为ByteCode,解释执行ByteCode,同时手机TurboFan优化编译所需的信息]、TurboFan[编译器，利用Ignition收集的类型信息，将ByteCode转换为优化的汇编代码、Orinoco[垃圾回收模块，将程序不再需要的内存空间回收])

再简单一点说，Node.js就是运行在服务端上的JavaScript
Node.js是一个事件驱动I/O服务端JavaScript环境。

安装

首先，cmd命令行检查本地是否安装了node.js

C:\Users\alien>node -v
v10.17.0

如果未安装去Node官网下载

极速入门

开发工具：WebStorm2020.1版本

变量的定义与使用

和js代码一致
在这里插入图片描述
运行

函数的定义和使用

在这里插入图片描述

使用模块

Node.js引入了模块的思想，每个文件就是一个模块，有自己的作用域，有点类似Java中的类，在一个文件里面定义的变量、函数、类都是私有的，对其他文件均不可见
每个模块内部，module变量代表当前模块，exports属性是模块对外的接口，加载某个模块，其实是加载该模块的module.exports属性

运行

创建Http服务

http为node内置的web模块
在这里插入图片描述
浏览器访问localhost:8000

在这里插入图片描述

接收url中的参数

在这里插入图片描述
控制台命令执行代码后，浏览器访问http://localhost:8000/?username=ss&id=1&age=18

资源管理器Npm

Npm概述

Npm全称Node Package Manager，是Node包管理和分发工具
可以将Npm理解为前端的Maven
Npm可以方便地下载js库，从而管理前端工程
目前，Node.js已经集成了Npm工具，可通过npm -v 命令查看

在这里插入图片描述

极速入门

创建工程

创建一个名为Npm的文件夹，使用WebStorm打开
Terminal中使用命令对工程进行初始化，初始化完成后，会产生package.json文件（相当于Maven的核心文件pom.xml）
我们康康package.json里的内容
其中，main中的入口文件可以自行创建并指定

js库的安装和卸载（本地安装和卸载）

在Terminal使用命令安装js库
卸载只需要在Terminal里执行如下命令即可

npm uninstall jquery

在这里插入图片描述

js库的安装和卸载（全局安装和卸载）

这里不进行演示
命令如下：

npm install jquery -g

默认是安装在

{sys.user}/node_modules

修改镜像源

首先安装一下nrm

npm install nrm -g

使用如下命令查看镜像源

nrm ls

在这里插入图片描述

修改镜像源，执行如下命令

nrm use 镜像源名（如taobao)

WebPack

WebPack概述

WebPack实际上就是一个前端资源打包工具
WebPack将根据模块的依赖关系进行静态分析，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用
WebPack官网了解一下

安装

非常之简单
三行代码分别执行

npm install webpack -g
npm install webpack-cli -g
webpack -v #查看版本

当前我使用的版本是

在这里插入图片描述

极速入门

工程结构

在这里插入图片描述

创建src文件夹，在下面创建两个工具bar和done
bar.js

export default function bar(str) {
    document.write(str)
}

done.js

export function add(a,b) {
    return a+b
}

编写入口程序index.js，调用两个工具进行使用
index.js

import bar from "./src/bar";
import {add} from "./src/done";

bar("20+30="+add(20,30))

创建webpack.config.js，即webapck的核心配置文件
webpack.config.js webpack的官网有参考代码

//引入路径解析器
const path = require('path');

module.exports = {
    //程序入口
    entry: './index.js',
    //输出配置
    output: {
        //打包后包存储的路径
        path: path.resolve(__dirname, 'dist'),
        //打包后的文件名
        filename: 'bundle.js'
    }
};

终端执行webpack进行打包

打包完成后就会发现工程目录出现了dist目录，以及dist目录下的bundle.js文件
在index.html文件中引用打包后的文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="./dist/bundle.js"></script>
</head>
<body>

</body>
</html>

尽管body里面什么内容也没有，但是因为我们调用了bar和done.所以页面上其实是会显示“20+30=50”的字样的

在这里插入图片描述

css打包

Webpack本身只能处理JavaScript模块，如果要处理其他类型的文件，就需要使用loader进行转换。
Loader可以理解为模块和资源的转换器，本身其实是一个函数，接受源文件作为参数，返回转换的结果，这样，编程人员可以通过require来加载任何类型的模块或文件（如CoffeeScript、JSX、LESS或图片）
Webpack提供两个工具处理样式表，css-loader和style-loader，css-loader提供你能够使用类似import和url(…)的方法实现require()功能，style-loader是将所有的计算后的样式加入到页面中，两者结合在一起才能使我们把样式表嵌入到webpack打包后的js文件中

首先我们需要安装一下css-loader和style-loader这两个工具
在终端执行如下命令

# --save是在本地保存
npm install style-loader css-loader --save-dev

安装完成后可以在工程目录下看到node_modules文件夹，里面下载了巨多的东西
在这里插入图片描述
然后通过npm init命令进行初始化后，在生成的package.json中可以看到两个工具被安装的信息

这里需要插播一下dependencies和devDependencies的区别
dependencies在打包时会被打包到最终的文件中，但devDependencies就不会被打包到最终的文件里
配置在devDependencies里的工具，只在打包的过程中被使用，在项目部署执行的时候并不需要
但如果这个工具在打包时和打包后都需要使用，那么把它放在dependencies下，如vue.js

编写css文件
在webpack.config.js里配置loader
webpack的官网有提供配置loader的方式，除了配置文件的方式，还有内联方式和CLI方式，但配置文件方式是最靠谱的，所以推荐配置文件方式
在入口程序index.js里进行引用该css文件
在终端使用webpack命令打包，运行html文件查看效果

在这里插入图片描述

Dean_xiu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Node+Npm+WebPack极速入门

文章目录Node.jsNode.js概述安装极速入门变量的定义与使用函数的定义和使用使用模块创建Http服务接收url中的参数资源管理器NpmNpm概述Node.jsNode.js概述简单的来说，Node.js就是基于JavaScript语言和V8引擎的开源Web服务器项目简单插播一下V8引擎，非常强悍的JavaScript引擎，可以使js应用在各个领域，如Web、App、桌面端、服务端及IOTV8主要有着非常重要的四个模块（Parser[负责将js源码转换为Abstract Syntax Tr
复制链接

扫一扫