目录
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};
这样，运行起来后，我们就能逐步调试了
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
