前端nodejs组件 webpack
概念
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 [email protected] -g或 cnpm install [email protected] -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: '首页', //生成的页面标题首页
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: '首页', //生成的页面标题首页
filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
template: 'vue_02.html' //根据vue_02.html这个模板来生成(这个文件请程序员自己生成)
})
]
}
五.webpack-dev-server-程序调试
一.修改webpack.config.js
二.在要调试的地方加debugger
