目录
前言:
这是一篇从后端开发人员的视角出发,编写的关于NodeJS和Webpack从零开始,从安装到使用的记录,基本上每一步都有注释说明,可放心食用;另外在Webpack打包演示中简单涉及Vue指令的使用,直接复制相应页面即可,不影响Webpack打包的使用;
1.NodeJS
NodeJS:基于V8引擎可用于执行JS的平台
npm:包管理工具,用于从NPM服务器上传/下载依赖包;
1.1 NodeJS安装
下载地址:https://nodejs.org/en/ 推荐LTS版本
备注:LTS:稳定版 Current:最新版
2.安装步骤:一路Next即可(安装路径无中文)
3.确认版本:
node -v
1.2 修改NodeJS安装模块路径:
假设第2步NodeJS安装路径是F:\nodejs\ 而通过npm下载的模块包默认在C盘,会造成文件积压在C盘
为了让下载的模块包放在NodeJS安装目录中,需要进行以下步骤:
1.在nodejs根目录中依次创建node_global与node_cache文件夹,并在node_global文件夹中创建node_modules文件夹
2 修改prefix和cache:
在该目录下打开命令窗口,依次执行下列两条命令:
- 设置全局目录
npm config set prefix "F:\nodejs\node_global"
- 设置缓存目录
npm config set cache "F:\nodejs\node_cache"
- 配置NodeJS环境变量
先进入 我的电脑-属性-高级系统设置-环境变量
添加系统变量:添加NODE_HOME
NODE_PATH //名称
F:\nodejs\node_global\node_modules
修改用户变量:编辑Path,将指向C盘的Npm修改为指向NodeJS的node_global文件夹
特别提示:修改的是上方的用户变量中的Path
备注:
1.系统变量中的Path有个指向nodejs的安装路径无需修改;
2.若通过Npm下载的模块在执行时出现不是内部/外部命令,在安装正常前提下,重新检查npm这三处环境变量;
1.3 配置镜像源:
先说下原因,由于npm服务器在国外,通过npm install模块时容易出现卡顿现象,为了减少卡顿,这里需要切换使用国内镜像或者使用其他工具下载模块(比如说cnpm,yarn等);
1 下载nrm (方便切换镜像源的工具)
npm install -g nrm --registry https://registry.npm.taobao.org
// -g 全局安装,会将下载的依赖包安装到npm全局目录(node_global,后续不再说明)中;
2 设置镜像源 使用淘宝镜像
nrm use taobao
//备注 可通过nrm ls 查看全部镜像源
2.Webpack
webpack:基于NodeJS的打包工具;
2.1 Webpack安装
webpack分为本地安装和全局安装两种;
本地安装(推荐):
将webpack安装在本地项目的node_modules文件夹中,仅针对本项目有效;
* 备注 若webpack版本>4+,需要先安装webpack-cli
npm install -save-dev webpack-cli
npm install -save-dev webpack
npm install -save-dev webpack@<version> //安装指定版本的webpack
// -save-dev 将模块安装到项目目录下,并在package文件的devDependencies节点写入依赖
安装webpack
注意:本地安装后,会生成node_modules文件夹和package.json;
node_modules:本项目专属的一个存放模块包的文件夹;
package.json:类似于maven的pom,记录引入的模块及版本等信息;
全局安装:
将webpack安装在nodejs的node_modules文件夹中
npm install -g webpack
npm install -g webpack@<version>
安装完成后通过webpack -v查看版本即表示安装成功
2.2 Webpack打包
使用以下一段html代码来分别演示如何进行分模块打包:文件名称demo.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div id="app">
第一个数字<input type="text" v-model="num1" >
第二个数字<input type="text" v-model="num2" >
结果<span v-text="result"></span>
<button type="button" v-on:click="add()" >求和</button>
</div>
</body>
<script src="vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
num1:0,
num2:0,
result:0
},
methods:{
add:function(){
this.result=Number.parseInt(this.num1)+Number.parseInt(this.num2);
}
}
});
</script>
</html>
<script>
var vm=new Vue({
el:"#app",
data:{
num1:0,
num2:0,
result:0
},
methods:{
add:function(){
this.result=Number.parseInt(this.num1)+Number.parseInt(this.num2);
}
}
});
</script>
</html>
-
手动打包:
1.创建operation.js:仅用于存放函数
//被打包的组件之一
var add=function(x,y){
return Number.parseInt(x)+Number.parseInt(y);
}
var add2=function(x,y){
return x+y+2;
}
module.exports.add=add; //指定需要导出的方法 ES5语法
2.创建main.js :打包入口文件
//打包入口
var {add}=require("./operation"); //导入operation.js
var Vue=require("./Vue.min"); //引入Vue.js
var vm=new Vue({
el:"#app",
data:{
num1:0,
num2:0,
result:0
},
methods:{
add:function(){
// alert("计算");
this.result=add(this.num1,this.num2);
}
}
});
3.执行打包命令
webpack main.js build.js
此时会生成一个新的JS文件:build.js;
4.最终的demo.html
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<script src="build.js">/*引入打包后的JS*/
<body>
<div id="app">
第一个数字<input type="text" v-model="num1" >
第二个数字<input type="text" v-model="num2" >
结果<span v-text="result"></span>
<button type="button" v-on:click="add()" >计算</button>
</div>
</body>
</script>
</html>
此时打开demo.html仍可以正常进行求和操作表示手动打包成功
-
热部署:
为省去手动打包的步骤及解决修改文件后需要重新打包两个问题,这里演示如何添加热部署功能
1.修改包结构路径
- 创建dist文件夹:
- 创建src文件夹 :
- 创建operation.js文件(内容与上述手动打包操作中的operation.js一致)
- 将demo.html和vue.min.js,operation.js文件放入src文件夹
包结构如图所示:
2.初始化项目
npm init
//注意在src同级目录下执行
备注:执行该命令后需要添加部分项目信息(可随意填写,不影响打包)
执行完毕后生成生成package.json文件
package.json:类似于maven的pom文件,用于描述引入的模块及版本等信息;
包结构如图所示:
3. 本地安装热部署相关模块
npm install -save -dev webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1
clean-webpack-plugin@1.0.0
//注意在src同级目录下执行
//说明:
webpack-dev-server //热部署服务器 2.9.1
html-webpack-plugin //生成html 2.30.1
clean-webpack-plugin //清理上一次打包遗留下来的文件 1.0.0
安装完毕后会在当前目录生成一个名称为node_modules文件夹和package-lock.json
包结构如图所示:
4. src文件夹中创建打包入口文件main.js (内容与上述手动打包时的main.js一致)
包结构如图所示:
5. 根目录添加热部署打包配置 webpack.config.js
//引用html-webpack-plugin插件,作用是根据html模板在内存生成html文件,它的工作原理是根据模板文件在内存中生成一个index.html文件。
var htmlwp = require('html-webpack-plugin');
module.exports={
entry:'./src/main.js', //指定打包的入口文件
output:{
path : __dirname+'/dist', // 注意:__dirname表示webpack.config.js所在目录的绝对路径
filename:'build.js' //输出文件
},
devtool: 'eval-source-map', //映射生成文件与源文件,调试时可以看到源代码
plugins:[
new htmlwp({
title: '首页', //生成的页面标题
filename: 'index.html', //webpack-dev-server在内存中生成的文件名称,自动将build注入到这个页面底部,才能实现自动刷新功能
template: 'demo.html' //根据demo.html这个模板来生成
})
]
}
包结构如图所示:
6.执行打包
npm run dev
执行成功后自动用默认浏览器打开网页,此时任意修改代码都会触发重新编译及打包,无需重新执行打包命令;