前端nodejs组件 webpack

最新推荐文章于 2024-04-13 01:42:51 发布
最新推荐文章于 2024-04-13 01:42:51 发布
阅读量425 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chinatopno1/article/details/107984140
版权

概念

Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包
在这里插入图片描述
从图中我们可以看出，Webpack 可以将js、css、png等多种静态资源 进行打包，使用webpack有什么好处呢？
1、模块化开发
程序员在开发时可以分模块创建不同的js、 css等小文件方便开发，最后使用webpack将这些小文件打包成一个文
件，减少了http的请求次数。
webpack可以实现按需打包，为了避免出现打包文件过大可以打包成多个文件。
2、 编译typescript、ES6等高级js语法
随着前端技术的强大，开发中可以使用javascript的很多高级版本，比如：typescript、ES6等，方便开发，
webpack可以将打包文件转换成浏览器可识别的js语法。
3、CSS预编译
webpack允许在开发中使用Sass 和 Less等原生CSS的扩展技术，通过sass-loader、less-loader将Sass 和 Less的
语法编译成浏览器可识别的css语法。
在这里插入图片描述

安装

此处以全局安装为例:

OR.安装最新版本

全局安装就是将webpack的js包下载到npm的包路径下。
npm install webpack -g 或 cnpm install webpack -g

OR.安装webpack指定的版本

全局安装：npm install webpack@3.6.0 -g或 cnpm install webpack@3.6.0 -g

在cmd状态输入webpack，出现如下提示说明 webpack安装成功
在这里插入图片描述

应用示例

一.[目标页面] 选择要引用到WebPack技术的文件

此处我以下列代码文件为例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令的测试</title>
</head>
<body>
<!--实现在body区域显示一个传智播客名称-->
<div id="app">
    <!--相当于MVVM的view视图-->
    <!--{{name}}-->
    <a v-bind:href="url">
    <span v-text="name"></span>
    </a>
    <input type="text" v-model="num1"/> +
    <input type="text" v-model="num2"/>=
   <!-- <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
    <span v-text="result"></span>
    <!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
    <button v-on:click="change">计算</button>
    <div v-bind:style="{ fontSize: size + 'px' }">javaEE培训</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
    //编写MVVM中的model部分及VM（ViewModel）部分
    var VM = new Vue({
        el:'#app',//vm接管了app区域的管理
        data:{//model数据
            name:'黑马程序员',
            num1:0,
            num2:0,
            result:0,
            url:'http://www.itcast.cn',
            size:11
        },
        methods:{
            change:function () {
                this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2)
                //alert("计算结果："+this.result)
            }
        }
    });
</script>
</html>

二.创建应用规则文件

在这里插入图片描述

一.根据业务逻辑定义相关函数

例如:

var add = function (x, y) {
    return x + y;
};

var addtwo = function (x, y) {
    return x + y + 10;

};

二.导出(暴露)相关函数

OR.单个导出写法

例如:

//写法一:

module.exports.add = add; //导出名为'add'的函数

module.exports.addtwo = addtwo; //导出名为'addtwo'的函数
OR.批量导出写法

例如:

//写法二:


module.exports = {add,addtwo};//导出名为'add'和名为'addtwo'的函数

三.创建应用入口文件

在这里插入图片描述

一.导入此前暴露的函数和相关插件

注意:此处的’相关插件’是根据’目标页面’所使用的插件而导入的.

例如:


//导入当前目录下'modelOne.js'应用规则文件中导出(暴露)了的'add'函数.
var {add} = require("./modelOne");

//导入目标页面所需要的vue插件
var VueObj = require("./vue.min");

二.根据[目标页面]的业务需求,重写其代码

例如:

var VM = new Vue({
    el:'#app',//vm接管了app区域的管理
    data:{//model数据
        name:'黑马程序员',
        num1:0,
        num2:0,
        result:0,
        url:'http://www.itcast.cn',
        size:11
    },
    methods:{
        change:function () {
          this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2));
        }
    }
});

四.打包

通过cmd进入应用入口文件的目录,并通过命令进行打包.
命令格式:

webpack 应用入口文件名.js 自定义最终合成文件名.js

例如:

webpack main.js build.js

在这里插入图片描述

五.应用

在[目标页面]中删除原有的相关业务逻辑,并导入’自定义最终合成文件名’
在这里插入图片描述

整体代码

目标页面文件(应用技术前):vue_02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令的测试</title>
</head>
<body>
<!--实现在body区域显示一个传智播客名称-->
<div id="app">
    <!--相当于MVVM的view视图-->
    <!--{{name}}-->
    <a v-bind:href="url">
    <span v-text="name"></span>
    </a>
    <input type="text" v-model="num1"/> +
    <input type="text" v-model="num2"/>=
   <!-- <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
    <span v-text="result"></span>
    <!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
    <button v-on:click="change">计算</button>
    <div v-bind:style="{ fontSize: size + 'px' }">javaEE培训</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
    //编写MVVM中的model部分及VM（ViewModel）部分
    var VM = new Vue({
        el:'#app',//vm接管了app区域的管理
        data:{//model数据
            name:'黑马程序员',
            num1:0,
            num2:0,
            result:0,
            url:'http://www.itcast.cn',
            size:11
        },
        methods:{
            change:function () {
                this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2)
                //alert("计算结果："+this.result)
            }
        }
    });
</script>
</html>

目标页面文件(应用技术后):vue_02.html

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令的测试</title>
</head>
<body>
<!--实现在body区域显示一个传智播客名称-->
<div id="app">
    <!--相当于MVVM的view视图-->
    <!--{{name}}-->
    <a v-bind:href="url">
    <span v-text="name"></span>
    </a>
    <input type="text" v-model="num1"/> +
    <input type="text" v-model="num2"/>=
   <!-- <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
    <span v-text="result"></span>
    <!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
    <button v-on:click="change">计算</button>
    <div v-bind:style="{ fontSize: size + 'px' }">javaEE培训</div>
</div>
</body>
<script src="vue.min.js"></script>

<!-- 引用打包后的文件'build.js' -->
<script src="build.js"></script>

</html>

应用规则文件:modelOne.js

var add = function (x, y) {
    return x + y;
};

var addtwo = function (x, y) {
    return x + y + 10;

};

// webpack应用步骤:导出本Js文件中的函数

//写法一:

module.exports.add = add; //导出名为'add'的函数

module.exports.addtwo = addtwo; //导出名为'addtwo'的函数

//写法二:
/*

module.exports = {add,addtwo};//导出名为'add'和名为'addtwo'的函数


*/

应用入口文件:main.js


//导入当前目录下'modelOne.js'文件中的'add'函数.
var {add} = require("./modelOne");

var VueObj = require("./vue.min");

var VM = new Vue({
    el:'#app',//vm接管了app区域的管理
    data:{//model数据
        name:'黑马程序员',
        num1:0,
        num2:0,
        result:0,
        url:'http://www.itcast.cn',
        size:11
    },
    methods:{
        change:function () {
          this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2));
        }
    }
});

补充:自动打包(webpack-dev-server技术)

webpack-dev-server介绍

webpack-dev-server开发服务器，它的功能可以实现热加载 并且自动刷新浏览器。

一.安装(本地安装)

使用 webpack-dev-server需要安装webpack、 webpack-dev-server和 html-webpack-plugin三个包。
在这里插入图片描述
我们需要进入存有目标页面文件(已经替换原有业务逻辑),应用规则文件,入口文件,相关插件的目录,然后执行安装命令

命令如下:

cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev

二.配置webpack-dev-server

在这里插入图片描述

安装完成，会发现程序目录出现一个名为’node_modules’的目录(存放本程序依赖的包),
还有package.json文件，此文件中记录了程序的依赖。
我们要在package.json中配置script
要添加如下内容:

"scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 5008"
  },

参数说明:

–inline：自动刷新
–hot：热加载
–port：指定端口
–open：自动在默认浏览器打开
–host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址

devDependencies：开发人员在开发过程中所需要的依赖。 scripts：可执行的命令

三.配置webpack.config.js

在该目录下创建 webpack.config.js， webpack.config.js是webpack的配置文件。在此文件中可以配
置应用的入口文件、输出配置、插件等，其中要实现热加载自动刷新功能需要配置html-webpack-plugin插件。
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' //最终自动输出的文件
    },
    plugins: [
        new htmlwp({
            title: '首页', //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'vue_02.html' //根据目标文件这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}

四.运行

在这里插入图片描述
选择’package.json’,然后单击’Show npm Scripts’,接着就会自动运行起来,自动在内存中生成一个html文件,并打开.

整体代码

目标页面文件:vue_02.html

自动打包下的目标文件不需要引入build.js和main.js入口函数文件.

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令的测试</title>
</head>
<body>
<!--实现在body区域显示一个传智播客名称-->
<div id="app">
    <!--相当于MVVM的view视图-->
    <!--{{name}}-->
    <a v-bind:href="url">
        <span v-text="name"></span>
    </a>
    <input type="text" v-model="num1"/> +
    <input type="text" v-model="num2"/>=
    <!-- <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
    <span v-text="result"></span>
    <!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
    <button v-on:click="change">计算</button>
</div>
</body>
<script>
    //编写MVVM中的model部分及VM（ViewModel）部分

</script>
</html>

应用规则文件:modelOne.js

/**
 * Created by Administrator on 2018/6/9.
 */

var add = function (x, y) {
    return x+y;
}
var add2 = function (x, y) {
    return x+y+2;
}
module.exports.add = add;
// module.exports ={add,add2};//如果有多个方法这样导出
// module.exports.add2 = add2//如果有多个方法也可以这样导出

应用入口文件:main.js

/**
 * Created by Administrator on 2018/6/9.
 */
//导入model01.js
var {add} = require("./modelOne")
var Vue = require("./vue.min")
var VM = new Vue({
    el:'#app',//vm接管了app区域的管理
    data:{//model数据
        name:'黑马程序员',
        num1:0,
        num2:0,
        result:0,
        url:'http://www.itcast.cn',
        size:11
    },
    methods:{
        change:function () {
            this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2))
            // this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2)
            //alert("计算结果："+this.result)
        }
    }
});

自动化依赖文件:package.json

{
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 5008"
  },
  "devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

自动化配置文件: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: '首页',  //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'vue_02.html' //根据vue_02.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}

五.webpack-dev-server-程序调试

一.修改webpack.config.js

在这里插入图片描述

二.在要调试的地方加debugger

在这里插入图片描述

君を見つけて
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Webpack安装方式、webpack-dev-server、html-webpack-plugin、各种loader、Babel、vue如何使用
AnMuMuPrincess的博客
12-06 173
Webpack起步 为什么使用webpack 1.网页引用的静态资源（JS,CSS,Images，字体文件，模板文件）多了以后会发起很多的二次请求 2.要处理错综复杂的依赖关系 什么是webpack 基于前端的一个项目构建工具，是基于Node.js的一个前端工具，可以对项目进行合并、压缩、精灵图、图片的Base64编码 webpack两种安装方式 运行npm i webpack -g全局使用webpack命令 项目目录 在终端中输入npm init -y生成package.json配置文件 node_m
nodejs和webpack基础
QB哥欢迎您
07-11 1965
node环境搭建和webpack入门配置
Node.js + webpack
z750467878的博客
08-10 453
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。通俗的理解：Node.js 为 JavaScript 代码的正常运行，提供的必要的环境。浏览器是 JavaScript 的前端运行环境Node.js 是 JavaScript 的后端运行环境Node.js 中无法调用 DOM 和 BOM 等 浏览器内置 API相同点：Node.js与浏览器都是javascript的运行环境，都能够解析js程序不同点：Node.js无法使用DOM和BOM。
Node.js和webpack入门-个人学习笔记
最新发布
m0_69356164的博客
04-13 606
个人关于Node.js入门和Webpack-入门的学习笔记，不喜勿看，有侵权请联系作者
大前端技能讲解：NodeJS、Npm、Es6、Webpack
yitong的博客
05-13 1023
前端开发和前端开发工具Nodejs 安装及快速入门ES6 新语法Npm 包管理器Babel 的安装作用模块化管理Webpack 打包和编译如何快速构建一个 nodejs 项目 vue-admin-element如何快速构建一个 nodejs 项目 antdECMAScript。
【前端】Nodejs与Webpack（学习笔记）
wmh的博客
01-03 2417
Node.js 是一个独立的 JavaScript 运行环境，能独立执行 JS 代码，因为这个特点，它可以用来编写服务器后端的应用程序Node.js 作用除了编写后端应用程序，也可以对前端代码进行压缩，转译，整合等等，提高前端开发和运行效率Node.js 基于Chrome V8 引擎封装，独立执行 JS 代码，但是语法和浏览器环境的 V8 有所不同，没有 document 和 window 但是都支持 ECMAScript 标准的代码语法模块化：Nodejs中，每个文件都是单独的模块。
nodejs + webpack + react
09-29
标题 "nodejs + webpack + react" 暗示了我们讨论的是一个基于Node.js环境的前端项目，其中使用Webpack作为模块打包工具，并结合React库来构建用户界面。这个项目利用Webpack的强大功能，如自动化打包、模块管理和...
详解webpack打包nodejs项目(前端代码)
10-18
Webpack 是一个流行的前端构建工具，它能够将 JavaScript、CSS、图片等各类前端资源打包成一个或多个可部署的文件。Webpack 打包 Node.js 项目（尤其是前端代码）的场景通常发生在前端应用需要与后端服务紧密结合时...
nodejs-webpack进阶教程-逐步加入vue、HtmlWebpackPlugin、css压缩、热部署
11-30
在现代前端开发中，Node.js作为后端脚本语言，Webpack作为模块打包工具，两者结合能构建出高效、模块化的应用。本教程将深入探讨如何在Node.js环境中利用Webpack进行项目配置，集成Vue.js框架，添加...
AjWeb:具有react + nodejs + webpack + babel的个人Web公文包
03-16
它集成了React（一个由Facebook维护的前端JavaScript库，用于构建用户界面）、Node.js（一个基于Chrome V8引擎的JavaScript运行环境，用于后端开发）、Webpack（一个模块打包工具，处理前端资源的打包和优化）以及...
Node.js与Webpack
Peng_jj的博客
08-08 329
Node.js 为何能执行JS?什么是 Node.js?Node.js 安装。
webpack-dev-server与html-webpack-plugin的基本使用
whuhewei的博客
04-13 1193
在项目开发过程中，如果每次改动代码之后都要刷新浏览器才能获得最新的表现，体验不是很好。这个时候我们就需要用到实时打包编译的功能，webpack-dev-server可以帮助我们： 安装webpack-dev-server 调出终端输入命令cnpm i webpack-dev-server -D，安装过程如下： 为了在node开发环境下快速启动webpack-dev-server，我们在packa...
webpack插件：webpack-dev-server和html-webpack-plugin，devserver节点配置
weixin_41915877的博客
12-09 304
webpack-dev-server和html-webpack-plugin，devserver节点配置
前端构架配置（二）：node.js、 webpack、css-loader、html-loader、style-loader、webpack-dev-server等插件安装总出错解决方式
qq_41800210的博客
10-28 599
众所周知，如果我们需要用到webpack打包，则需要做很多准备工作，包括node.js的安装，webpack等的安装。 这个安装过程总会出现各种安装不成功的情况。这里不细说各种情况，直接给出一个最通用的解决方案。 方案如下：核心是配套好各个插件的版本号，如果版本号没有配套好，会出现诸如此类的错误： 这里直接给出一套能够适...
window下安装node.js并安装cnpm、webpack、webpack-dev-server
weixin_43569697的博客
04-28 1368
我用的node.js的版本是9.4，如果没有什么特别需求的话，建议安装跟着这个版本安装。 到nodejs的官网下载 https://nodejs.org/en/download/ 滚动到页面底部，选择以前的版本 找到nodejs9.4的版本，点击download进入https://nodejs.org/download/release/v9.4.0/，自行选择64位的或32位的 下载完成后点...
webpack及node.js的安装(超详细)
Alan_ran的博客
03-24 4629
一、安装webpack前首先需要安装Node.js 1.node.js自带了软件安装包管理工具npm 2. nodejs以往版本下载地址：https://nodejs.org/zh-cn/download/releases/ 版本根据自己的需求进行下载，我下载的是下面这个版本 node-v12.3.0-x64.msi 3.下载完成之后，双击安装包，点击我接受，再点击next 4. 安装路径可以自己定义,我安装到了D盘 5. 这一步选择第四个，添加到环境变量，省的还要去自己...
前端开发常用的18个JavaScript框架和库
码为人生的博客
02-23 2671
在WebGL库和SVG/Canvas元素的支持下，JavaScript惊人的强大。几乎可以为网络构建任何东西，包括基于浏览器的游戏和本地应用，本文整理了可供Web开发人员使用的18个JavaScript 3D库和框架。
打包利器webpack
Dimikart的博客
12-25 1358
Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。市面上已经存在的模块管理和打包工具并不适合大型的项目，尤其单页面 Web 应用程序。最紧迫的原因是如何在一个大规模的代码库中，维护各种模块资源的分割和存放，维护它们之间的依赖关系，并且无缝的将它们整合到一起生成适合浏览器端请求加载的静态资源。
idea 配置nodejs'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序
06-03
在你的情况下，可能是因为你没有安装webpack-dev-server或者没有将它添加到系统的环境变量中。 你可以尝试以下步骤： 1. 确认你已经安装了webpack-dev-server。你可以在命令行中输入`npm list -g webpack-dev-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值