大家好，今天给大家讲解的是如何使用Node.js结合webpack导入Vue，并使用webpack-dev-server实现虚拟服务器自动打包刷新
1、安装Node.js
#### 首先进入Node.js的官方网站
https://nodejs.org/en/点击打开链接
点击左侧按钮下载Node.js
因为我已经安装过了，就不再演示安装过程了，安装过程中一直点next就行，安装路径选择自己想安装的地方即可。
2、安装和切换nrm包镜像地址
2.1、输入 node-v 和 npm-v 可以看到安装完毕之后的版本，代表我们已经安装成功了；
2.2、运行npm i nrm -g全局安装nrm包；
2.3、安装完毕之后，使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址，可以看到我的 * 在 taobao 上，代表我正在使用 taobao 的镜像地址；
2.4、使用nrm use npm或nrm use taobao切换不同的镜像源地址；
3、使用webpack进行操作
有了镜像地址之后，我们开始使用webpack操作
3.1、首先先创建webpack-vue文件夹，在文件夹下创建一下目录
3.2、在这个目录输入 npm init -y，来创建我们的package.json文件
可以看到我们此时多了一个 package.json 的文，此时结构如下：
{
"name": "webpack-vue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
注意，现在的操作都要在webpack-vue文件夹下操作cmd
3.3、我们还没有导入webpack，输入 npm i webpack webpack-cli下载webpack
导入webpack之后，我们输入 webpack .\src\main.js -o .\dist\bundle.js，来帮我们dist目录下创建一个叫bundle.js的文件，使用它我们就可以在main.js里面写jquery代码或引入css样式等操作。
导入完毕之后我们来测试一下能不能用，在main.js中console.log()一句话：
然后在再index.html中引入bundle.js文件：
打开index.html，检查元素中看测试结果：
成功了，但是我们每修改一次main.js都要执行一次 webpack .\src\main.js -o .\dist\bundle.js很麻烦，所以我们接下来使用 webpack-dev-server 来操作
3.4、输入 npm i webpack-dev-server -D 安装webpack-dev-server
因为我们下载了webpack-dev-server，要应用它得在package.js中的 scripts 配置如下代码：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server"
}
此时的package.json如下：
{
"name": "webpack-vue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
},
"devDependencies": {
"webpack-dev-server": "^3.10.3"
}
}
3.5、创建 webpack.config.js文件，这是用来写webpack 的配置的。
我们想设置index.html为入口文件，并且在内存中运行，输入 npm i html-webpack-plugin -D 来安装这个插件，在webpack.config.js中配置它：
const path = require('path');
// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
// 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, './src/main.js'), // 入口文件
output: {
path: path.join(__dirname, './dist'), // 输出路径
filename: 'bundle.js' // 指定输出文件的名称
},
plugins: [ // 所有webpack 插件的配置节点
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'), // 指定模板文件路径
filename: 'index.html' // 设置生成的内存页面的名称
})
]
}
配置完成之后把index.html中的scrpit的标签给注释掉，因为我们webpack.config.js文件中配置了当运行命令时在内存中帮我们创建一个index.html和bundle.js文件，在我们的根目录下面，我们是看不到的。
此时我们在package.json文件中的dev配置如下几个参数：
- –open：自动打开我们的项目
- –port 8888：可以随意配置我们的端口号
- –contentBase src：指定默认打开的是src下的index.html文件
- –hot：因为每次运行
npm run dev命令都会重新创建覆盖我们的bundle.js文件，使用此参数可以使其变成热更新，就不再替换我们的文件而是更新我们的文件，这样更加减少我们的内存消耗，大大地提高了运行效率。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 8888 --contentBase src --hot"
}
运行 npm run dev 命令，完美运行
为什么我们没导入任何包却又main.js中console.log(‘ok’)，'ok’的信息呢，在网页中，ctrl + u，打开原网页中，我们可以发现，在body标签下面我们多了一个scrpit标签，这是webpack自动帮我们导入的，所以我们不用手动导入了
4、使用在main.js中导入Vue
4.1、我们使用了webpack肯定不能在手动导包了，我们使用npm下包，输入 npm i vue -S
4.2、下载完毕之后，在main.js中导入vue.js
// 导入vue.js
import Vue from '../node_modules/vue/dist/vue';
// 创建Vue实例
var app = new Vue({
el: '#app',
data: {
msg: '终于好了！！！'
}
})
4.3、在index.html中引用vue
4.3、启动index.html
演示就此结束了，本人也是最近才开始学vue和webpack的，也是第一次发博客，可能有些啰嗦了，希望大家支持！！！
