-
所有nodejs历史版本的链接: https://nodejs.org/dist/
-
找到10.13.0,里面是 nodejs V10.13.0所有类型安装文件
-
.msi
使用这个不用配置环境变量 -
.zip
解压即可用,但是需要配置环境变量 -
我这里下载
.msi
后缀文件 -
双击下载完成的
node-v10.13.0-x64.msi
,点击next
- 勾选同意
- 更改为你认为合适的安装路径
-
点击next
-
npm package manage
表示 npm包管理器 -
online documentation shortcuts
在线文档快捷方式 -
Add to Path
添加 node 安装路径到环境变量 -
这就是
.msi
不需要手动添加环境变量的原因,node已经帮我们配置好了
- 是否勾选工具去编译 native 模块,我们不勾选
- 点击 install
- 等待安装完毕
1.3.2、测试
使用管理员方式打开dos窗口,输入 node -v
显示如图样式,则安装成功
1.3.3、更改淘宝镜像
管理员方式打开DOS窗口,输入
npm config set registry https://registry.npm.taobao.org
点击回车就更换成功了,可以通过
npm config get registry
上面命令去查看是否成功,如果返回是
则更换成功
1.3.4、全局安装webpack
-
在DOS命令窗口中输入
npm install webpack@3.6.0 -g
安装webpack(这里指定版本号3.6.0,因为 vue cli2 依赖该版本) -
其中的 -g 代表是全局安装,全局安装可以在电脑任何一个位置执行webpack指令
-
安装需要3~5分钟,之后出现可以让你输入的命令行就说明安装完成,如下图
- 在DOS命令窗口输入
webpack --version
- 注意是两个横线
如果你看到3.6.0,说明你已经成功安装了webpack3.6.0
========================================================================
首先创建如下文件和文件夹
-
dist
文件夹: 用于存放之后打包的文件 -
src
文件夹: 用于存放我们写的源文件 -
main.js
项目的入口文件 -
mathUtils.js
定义了一些数学工具函数,可以在其他地方引用,并且使用。 -
index.html
浏览器打开展示的首页html -
package.json
通过npm init
生成的,npm 包管理的文件
现在的 js 文件中使用了模块化的方式进行开发,他们可以直接使用吗?不可以。
-
因为如果直接在 index.html 引入这两个 js 文件,浏览器并不识别其中的模块化代码。
-
另外,在真实项目当中有许多这样的 js 文件时,我们一个个引用非常麻烦,并且后期非常不方便对它们进行管理
我们应该使用webpack工具,对多个 js 文件进行打包
webpack src/main.js dist/bundle.js
打包后会在 dist
文件夹下,生成一个 bundle.js
文件
- 此文件是 webpack 处理了项目直接文件依赖后生成的一个 js 文件,我们只需要将这个 js 文件在 index.html 中引入即可
例如,我们使用模块化开发两个js文件
之后在 main.js 中进行引入两个js文件,在Termial终端使用 webpack 打包main.js
// 将src下的main.js 打包到dist目录下然后命名为bundle.js
webpack src/main.js dist/bundle.js
所以我们就知道了,我们以后在 src 下开发,之后让 webpack 打包main.js,然后我们引用打包后的js文件,这就是我们的开发模式。
=============================================================================
module.exports = {
mode: ‘development’, // mode 用来指定构建模式,可选值有 development 和 production
}
mode 节点的可选值有两个,分别是:
- development
-
开发环境
-
不会堆打包生成的文件进行代码压缩和性能优化
-
打包速度快,适合在开发阶段使用
- production
-
生产环境
-
会对打包生成的文件进行代码压缩和性能优化
-
打包速度很慢,仅适合在项目发布阶段使用
每次使用webpack的命令都需要写上入口和出口作为参数,非常麻烦,有没有一种方法可以将者两个参数写到配置中,在运行时,直接读取呢?
-
当然可以,就是创建一个
webpack.config.js
文件 -
通过 entry 节点指定打包的入口
-
通过 output 节点指定打包的出口
const path = require(‘path’)
module.exports = {
// 入口:可以是字符串/数组/对象,我们这里的入口只有一个,所以写一个字符串即可
entry: ‘./src/main.js’,
// entry: path.join(__dirname,‘./src/index.js’)
// 出口:通常是一个对象,里面至少包含两个重要属性,path 和 filename
output :{
// 注意: path通常是一个绝对路径
path: path.resolve(__dirname,‘dist’),
// 输出文件目录
filename: ‘bundle.js’
}
}
这样配置之后我们用 webpack 打包时,就可以直接在终端输入 webpack
,就相当于 webpack src/main.js dist/bundle.js
,虽然看起来简洁,但是这不是我们最终的方式,我们最好的方式在下方有记录
webpack.config.js是 webpack 的配置文件。 webpack 在真正开始打包构建之前,会先读取这个配置文件 , 从而基于给定的配置,对项目进行打包。
注意:由于 webpack 是基于 node.js 开发出来的打包工具,因此在它的配置文件中,支持使用 node.js 相关的语法和模块进行webpack 的
既然已经全局安装了 webpack,为什么还要局部安装呢?这是因为我们需要的项目可能是从网上下载下来的,项目中使用的webpack和我们本地的webpack可能版本不同,这就需要在局部安装webpack了
目前,我们使用的webpack是全局的webpack,如果我们想使用局部来打包呢?
-
因为一个项目往往依赖特定的webpack版本,全局的版本可能很这个项目的webpack版本不一致,导出打包出现问题。
-
所以通常一个项目,都有自己局部的webpack。
第一步,项目中需要安装自己局部的webpack
- 这里我们让局部安装安装 webpack3.6.0
npm install webpack@3.6.0 --save-dev
但是,每次执行都敲这么一长串有没有觉得不方便呢?OK,我们可以在package.json的scripts中定义自己的执行脚本。
-
package.json中的scripts的脚本在执行时,会按照一定的顺序寻找命令对应的位置。
-
首先,会寻找本地的 node_modules/.bin 路径中对应的命令。
-
如果没有找到,会去全局的环境变量中寻找
在 package.json 文件下有 scripts ,是脚本的意思,我们只需要在下方配置脚本
这样配置完成之后,我们在终端输入 npm run build
也就相当于执行 webpack
,也就相当于执行 webpack src/main.js dist/bundle.js
===================================================================================
在实际开发过程中, webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他 非 .js 后缀名结尾的模块 , webpack 默认处理不了, 需要调用 loader 加载器才可以正常打包 ,否则会报错
loader加载器的作用: 协助 webpack 打包处理特定的文件模块 。比如:
-
css-loader 可以打包处理 .css 相关的文件
-
less-loader 可以打包处理 .less 相关的文件
-
babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法
- loader是webpack中一个非常核心的概念。
webpack用来做什么呢?
-
在我们之前的实例中,我们主要是用webpack来处理我们写的js代码,并且webpack会自动处理js之间相关的依赖。
-
但是,在开发中我们不仅仅有基本的js代码处理,我们也需要加载css、图片,也包括一些高级的将ES6转成ES5代码,将TypeScript转成ES5代码,将scss、less转成css,将.jsx、.vue文件转成js文件等等。
-
对于webpack本身的能力来说,对于这些转化是不支持的。
-
那怎么办呢?给webpack扩展对应的 loader 就可以啦。
loader使用过程:
-
步骤一:通过 npm 安装需要使用的 loader
-
步骤二:在 webpack.config.js 中的 modules 关键字下进行配置
4.1.1、css文件处理准备工作
项目开发过程中,我们必然需要添加很多的样式,而样式我们往往写到一个单独的文件中。
-
在src目录中,创建一个css文件,其中创建一个normal.css文件。
-
我们也可以重新组织文件的目录结构,将零散的js文件放在一个js文件夹中。
-
normal.css 中的代码非常简单,就是将body设置为red
-
在webpack中文网中有 loader的用法:https://www.webpackjs.com/
- css 文件的打包需要用到 style-loader,css-loader
- 先安装 style-loader,再安装 css-loader
- 之后在 main.js 引用我们自己的 css 文件,再打包即可
总结步骤:
- 首先安装 style-loader 和 css-loader
npm install --save-dev css-loader
npm install style-loader --save-dev
- 在 webpack.config.js 的 module-> rules 数组中,添加loader规则如下
module: { // 所有第三方文件模块的匹配规则
rules: [ // 文件后缀名的匹配规则
{
test: /.css$/,
use: [ ‘style-loader’, ‘css-loader’ ]
}
]
}
其中, test 表示匹配的文件类型,use 表示对应要调用的 loader
注意:
-
use 数组中指定的 loader 顺序是固定的
-
多个 loader 的调用顺序是:从后往前调用
如果我们希望在项目中使用less、scss、stylus来写样式,webpack是否可以帮助我们处理呢?
我们这里以less为例,其他也是一样的。
我们还是先创建一个less文件,依然放在css文件夹中
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
后话
对于面试,说几句个人观点。
面试,说到底是一种考试。正如我们一直批判应试教育脱离教育的本质,为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的,几千年来一直如此。除非你有实力向公司证明你足够优秀,否则,还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段,个人的收获是很大的,我也认为这是一种不错的学习方式。首先,面试问题大部分基础而且深入,这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义,但它的意义就在每天的谈话间。
所谓面试造火箭,工作拧螺丝。面试往往有更高的要求,也迫使我们更专心更深入地去学习一些知识,也何尝不是一种好事。
一个人可以走的很快,但一群人才能走的更远。如果你从事以下工作或对以下感兴趣,欢迎戳这里加入程序员的圈子,让我们一起学习成长!
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算
后话
对于面试,说几句个人观点。
面试,说到底是一种考试。正如我们一直批判应试教育脱离教育的本质,为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的,几千年来一直如此。除非你有实力向公司证明你足够优秀,否则,还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段,个人的收获是很大的,我也认为这是一种不错的学习方式。首先,面试问题大部分基础而且深入,这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义,但它的意义就在每天的谈话间。
所谓面试造火箭,工作拧螺丝。面试往往有更高的要求,也迫使我们更专心更深入地去学习一些知识,也何尝不是一种好事。
一个人可以走的很快,但一群人才能走的更远。如果你从事以下工作或对以下感兴趣,欢迎戳这里加入程序员的圈子,让我们一起学习成长!
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算