目录
1. webpack介绍
webpack 可以打包所有的资源、脚本、图片、样式、表;
2. webpack的安装
安装的顺序大致如下,node.js作为运行基础,npm/cnpm是依赖管理,帮助我们来安装各种工具、资源,nrm可以查看当前资源获取源,淘宝镜像作为国内资源可以帮我们更快下载;
2.1 安装node.js
(这里用的是v12.14.0版本)
在官网下载所需版本的node.js,下载完成选择合适的目录默认安装;安装完成后检查node.js路径是否添加PATH环境变量中,若使用node -v命令可以显示node.js版本则代表安装成功,没有则需要我们手动添加;
2.2 修改npm仓库路径
npm是node包管理和分发的工具,使用npm可以对应用的依赖进行管理,很方便的下载js库,打包文件;
npm已经集成在node.js中的,使用npm -v命令可以查看npm版本,但是我们需要重新设置下载的依赖包所存放的路径,方便管理;
系统默认存放路径是:C:/用户/[用户名]/AppData/Roming/npm/node_meodules,可以使用 npm config ls 命令查看
- 首先我们需要在node.js的安装跟目录中新建两个文件夹 npm_modules 和 npm_cache ;
- 使用如下两个命令修改配置路径(其中安装路径自己修改):
npm config set prefix “D:\develop\nodejs\npm_modules”
npm config set cache “D:\develop\nodejs\npm_cache”- 再使用npm config ls 查看路径是否修改成功
2.3 安装cnpm和淘宝镜像
由于npm的服务器是在国外的,所以当我们使用默认的npm安装所需依赖时,速度往往会很慢,这里我们全局安装淘宝团队的cnpm工具和镜像,就可以从国内服务器下载依赖,命令中只需要将npm改为cnpm即可;
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后显示如下:
此时我们还有一步要完成,就是将使用的镜像指向taobao,步骤如下:
2.4 webpack安装
本地安装:仅将webpack安装在当前项目的node_modules目录中,仅对当前项目有效。
全局安装:将webpack安装在本机,对所有项目有效,全局安装会锁定一个webpack版本,该版本可能不适用某个项目;全局安装需要添加 -g 参数。
全局安装:cnpm install webpack -g
全局安装指定版本的webpack:cnpm install webpack@3.6.0 -g
ps:webpack4.x版本的,需要安装webpack-cli,命令如下:
cnpm install -g webpack-cli
3. webpack模块化范例(webpack版本3.6)
3.1 模块化定义js文件
通常分为以下四类(同一目录下,且webpack是全局安装):
main.js:入口文件;作用是导入自定义函数
和所需vue包,并完成数据层M和逻辑功能实现层VM,webpack打包也需要此文件;
model.js:自定义方法文件;作用是自定义函数,同时需要将定义的方法导出
;
test.html:普通html文件;完成视图的编写,直接调用在所打包好的build.js文件中的函数、Model;
vue.js:vue包;
接下来按如下顺序,通过代码来理解每一种文件的作用:
①model.js ②main.js ③test.html
①model.js:需要记住的是,定义的函数必须导出才能被main.js导入
function add(x, y) { //定义一个简单的加法函数
return x + y;
}
function add2(x, y) {
return x + y;
}
//module.exports.add = add;//单个方法导出
module.exports = {add,add2};//多个方法的批量导出
②main.js:引入需要用到的方法和vue包要导入才能使用
var {add} = require("./model01"); //导入model01.js中的add方法
var Vue = require("./vue.min"); //导入vue.js
var VM = new Vue({
el: '#app',
data: { //vue中的Model层
name: 'coderwhat扣什',
num1: 0,
num2: 0,
result: 0
},
methods: { //vue中的VM层
change: function () {
//可以直接使用使用导入的函数了
this.result = add(Number.parseInt(this.num1), Number.parseInt(this.num2));
//网页上输入的是字符串,需要转换成int类型
}
}
});
③test.html:引入build.js后,我们可以直接调用在main.js中定义的Model层数据和VM层方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack模块化打包</title>
</head>
<body>
<div id="app">
<span v-text="name"></span> <!--使用v-text来连接Dom和M,并解决闪烁问题-->
<input type="text" v-model="num1"> + <!--使用v-model来双向绑定Dom和M-->
<input type="text" v-model="num2"> =
<span v-text="result"></span>
<button v-on:click="change">计算</button> <!--使用v-on绑定click事件,及触发函数change-->
</div>
</body>
<script src="build.js"></script> <!--这里的build.js就是使用webpack打包产生的js文件-->
</html>
3.2 使用webpack打包main.js、model.js和vue包
因为在main.js文件中,我们引入了需要的model.js中的方法以及vue包,所以通过如下命令就能自动打包这些模块,调用时只需在
<script>
中引入即可。
webpack main.js build.js # 需要在main.js目录下cmd窗口中运行,将各模块打包成名为build.js的文件
4. webpack模块化范例(webpack版本4.41.4)
由于4.x版本和之前版本的打包方式有区别,所以作如下范例
当我们通过如cnpm install -g webpack安装不指定版本时,默认安装最新版本的webpack,
此时4.x版本还需要安装webpack-cli,所以通常用如下命令安装:
cnpm install --save-dev webpack webpack-cli
开发中,一般推荐本地安装webpack等,这样不会影响整个项
node_modules\.bin\webpac main.js -o build.js
#当本地安装时,我们调用webpack就要到相应的文件夹
5. webpack-dev-server 和 html-webpack-plugin
webpack-dev-server:开发服务器,它的功能是可以实现热加载,并且自动刷新浏览器(但不会打包成具体的文件,只存在于内存中),在真正打包前方便测试;
html-webpack-plugin:作用是根据html模文在内存中生成一个index.html文件。
模块化范例实现页面的热加载
这里我们采用本地安装webpack等软件的方式,实现范例:
5.1 环境初步配置
(这里node.js v12.14.0已经全局安装即系统环境变量中有,并且配置完毕 2.1-2.3 ,webpack版本4.41.4)
这里我们需要安装的是webpack、webpack-cli、webpack-dev-server、html-webpack-plugin(本地安装)
首先在一个实验目录webpackdemo中,使用此命令创建一个默认package.json文件
npm init -y
再使用下列命令本地安装上述四种软件
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
这时,我们就会得到这样一个目录
5.2 添加完整的目录结构
在实验文件夹下,
添加src目录用作存储函数、资源文件,
添加dist目录用以存储webpack打包好的js文件,
并在根目录下添加webpack.config.js文件作为webpack的配置文件,完成后如下:
5.3 添加函数、资源等文件
①vue02.html ②model.js ③vue.min.js ④main.js
①vue02.html:html模板文件;即正常实现页面视图功能的html文件,不过这里仅仅只有vue三层模型MVVM中的View(视图层),而Model(负责数据存储)和VM(负责业务逻辑处理)已经被提取出去了;但只用在<script>
上引入打包好的js文件,就可以正常调用其他两层中定义好的数据和功能,实现模块化;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-dev-server热加载</title>
</head>
<body>
<div id="app">
<span v-text="name"></span> <!--使用v-text来连接Dom和M,并解决闪烁问题-->
<input type="text" v-model="num1"> + <!--使用v-model来双向绑定Dom和M-->
<input type="text" v-model="num2"> =
<span v-text="result"></span>
<button v-on:click="change">计算</button> <!--使用v-on绑定click事件,及触发函数change-->
</div>
</body>
<script src="./dist/build.js"></script> <!--这里的build.js就是使用webpack打包产生的js文件-->
</html>
②model.js:定义函数,并需要导出函数
function add(x, y) {
return x + y;
}
module.exports = {add};
③vue.min.js:vue包
④main.js:入口文件,作用是导入自定义函数
和所需vue包,并完成数据层M和逻辑功能实现层VM,webpack打包也需要此文件;
var {add} = require("./model");//导入model01.js中的add方法
var Vue = require("./vue.min");//导入vue.js
var VM = new Vue({
el:'#app',
data:{ //vue中的Model层
name:'coderwhat扣什',
num1:0,
num2:0,
result:0,
},
methods:{ //vue中的VM层
change:function () {
this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2));
return this.result;
}
}
});
最后的目录结构如下:
5.4 修改配置文件
①修改package.json
这里的配置是为了使 webpack-dev-server 生效,并能实现诸如热加载这样的功能:
"scripts": { //这里是我们默认创建的package.json中scripts
"test": "echo \"Error: no test specified\" && exit 1"
},
我们需要将其修改为如下所示,这样当我们运行webpack-dev-server开发服务器后,就可以实现自动打开浏览器热加载功能了
"scripts": {
"dev": "webpack-dev-server --inline --hot --open --port 5008"
},
/*
--inline:自动刷新
--hot:热加载
--port:指定端口
--open:自动在默认浏览器打开
--host:可以指定服务器的 ip,不指定则为127.0.0.1,如果对外发布则填写公网ip地址
*/
②修改webpack.config.js
在这里我们需要引入 html-webpack-plugin,并指定入口文件、打包好的文件存放的位置和文件名,以及在内存中生成的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: 'vue02.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)
})
]
}
如此,我们所需安装配置的东西都已准备完毕;
5.5 运行
这里我们可以通过两种方式运行开发服务器,实现项目的热加载:
①打开项目根目录路径的cmd窗口,运行以下命令:
npm run dev
成功运行后cmd窗口如下
②当我们安装了WebStorm软件时,右键单击项目里的package.json,在选项中选择 Show npm Scripts就会出现箭头所指的npm框,这时我们双击dev即可运行;
以上两种方式成功运行则会自动跳转到设置好的ip:port,并加载内存中的index.html,示例页面如下:
tips:当运行不成功时,请注意从node、npm、webpack、webpack-cli、webpack-dev-server、html-webpack-plugin这些软件工具的版本考虑,是否操作方式或是版本不兼容;node、npm/cnpm推荐全局安装,而后续每一个小项目分组推荐本地安装webpack及后续软件,能减少系统耦合。
5.6 ‘webpack-dev-server’ 不是内部或外部命令,也不是可运行的程序
如果我们复制或者clone项目下来,发现无法运行报这个错误,可能时没有正确的npm版本造成的,此时我们通过如下操作即可解决问题:
rm -f node_modules # linux直接删除
/*-----------------------------*/
npm install rimraf -g # 也可以先安装删除工具再删除,避免路径过深无法删除的情况
rimraf node_modules
npm install # 重新安装依赖
npm run build # 重新打包文件
npm run dev # 运行
6. webpack程序调试方法
我们在开发过程中经常会遇到bug,所以需要在前端页面写完、函数和功能完成盗用后,测试功能的正确性,所以需要加上类似断点的功能进行程序调试;
①首先需要在webpack.config.js中开启debug调试
devtool: 'eval‐source‐map',
这里采用 5.1 -5.5 中的例子开启程序调试
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: 'vue02.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)
})
]
}
②在需要进行调试的函数中插入debugger
//model.j
function add(x, y) {
debugger
return x + y;
}
module.exports = {add};
这样,运行起来后,我们就能逐步调试了