一、webpack-dev-server篇
之前用的是gulp的server来启服务器，可以用webpack-dev-server来进行服务器启动。（据说能用webpack的尽量用webpack?）
首先，安装webpack-dev-server
cnpm i webpack-dev-server --save-dev
在gulp文件夹（在之前第三部分的文章中已建）中新建一个webpack.dev.server.js文件，来保存webpackDevServer启动服务器任务代码
关于webpack-dev-server的配置说明可以参考：https://segmentfault.com/a/1190000006964335
根据参考文献，配置webpack.dev.server.js如下：
在此之前要引入：
letwebpackDevServer= require('webpack-dev-server');
letwebpack = require('webpack');
后写以下代码：
其中红色框区域为webpack配置文件路径，就是原来的webpack.config.js，在此我已经改名为webpack.dev
new webpackDevServer()初始化
初始化后内部配置项说明在上面的参考文献地址已有，这里做简要说明：
new webpackServer({
contentBase:"./dev", //根目录
compress:true,//是否压缩// Set this if you want to enable gzip compression for assets
historyApiFallback:true,// This is handy if you are using a html5 router.
}).listen(9001,"localhost",function() { //这里的端口号要区别于gulp server里面的端口号，否则判断不出来是否开启成功。
console.log('webpack正在编译!');//其实可以不写为空，这里只是为了方便看出是否编译成功而写。
});
})
最后，在gulp配置文件gulpfile.js中添加新的dev2任务(开启刚配置好的webpack server服务)：
gulp.task('dev2',(done) =>{
runSequence(
'webpackDevServer',
done
)
});
运行 gulp dev2即可（gulp已全局安装）
============================================我是分割线===========================================
二、vue router （vue路由）
第一步，同样是安装
cnpm i vue-router --save
关于vue路由可查看官方文档：https://router.vuejs.org/zh-cn/installation.html（很详细）
按照文档所说，在项目源文件中的js上写入：
首先还是要引入vue 和vue-router （和文档上说的一模一样，前面已经安装了vue）：
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
再写入router图一内容：
项目的index.html文件如图写入代码：
再次运行gulp dev2，如图所示表示成功
浏览器输入http://localhost:9001/#/home可以看到画面：
以上vue路由还可以把home和about页面单独拆分出来，再做引入到源js代码中，如图：
router.js文件为router图一中routes:[]单独拆分的写法
其中的新建了pagess文件夹，里面有子文件夹home，about分别都有index.js
图为home里面的index.js
同理about里的index.js一样的方法。
发现直接这样写：
export default[
{
path:'/home',
component: require('./pagess/home')
]
require('..')不能生效，导致没发现文件，原因是这样的写法es6不承认。
解决方法：安装babel-plugin-add-module-exports ，babel的一个插件
cnpm install babel-plugin-add-module-exports --save-dev
用法在：https://github.com/59naga/babel-plugin-add-module-exports
其实只需两步，①安装，②在babel的配置文件.babelrc中加入插件：
"plugins":[
"add-module-exports"
]
再次运行即可。
三、css处理
需要两个插件：
css-loader webpack中引入css所需
style-loader 把css动态写入html模板中
使用方法：
①安装 cnpm i --save-dev css-loader style-loader
②在src源文件中app.js引入css
import './assets/css/reset.css'
③rule.js（webpack配置规则中）写入遇到css文件时的处理，如下图所示
