NodeJS+Webpack入门：从安装到使用

最新推荐文章于 2024-04-13 01:42:51 发布

和代码去流浪

最新推荐文章于 2024-04-13 01:42:51 发布

阅读量619

点赞数

分类专栏：服务器文章标签： webpack 前端 node.js nodejs

原文链接：https://blog.csdn.net/h675107964/article/details/91954591

版权

服务器专栏收录该内容

48 篇文章 3 订阅

订阅专栏

前言：

这是一篇从后端开发人员的视角出发，编写的关于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

执行成功后自动用默认浏览器打开网页，此时任意修改代码都会触发重新编译及打包，无需重新执行打包命令；

和代码去流浪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
NodeJS+Webpack入门：从安装到使用

目录前言： 1.NodeJS 1.1 NodeJS安装 1.2 修改NodeJS安装模块路径： 1.3 配置镜像源: 2.Webpack 2.1 Webpack安装本地安装（推荐）：全局安装： 2.2 Webpack打包手动打包：热部署：前言：这是一篇从后端开发人员的视角出发，编写的关于NodeJS和Webpack从零开始，从安装到使用的记录，基本上每一步都有注释说明，...
复制链接

扫一扫