webpack 搭建开发环境
搭建开发环境
为什么搭建开发环境呢？html,css,js等代码，运行在web服务器上。搭建一个本地服务器上，让其代码跑在服务器上面。因为生产环境代码是跑在线上服务器上面，这个时候请求接口，还是访问本地资源，都是通过http请求去访问的。当我们直接打开浏览器的时候不是通过http请求访问的。
webpack调试有三种：
1. webpack watch mode
在命令行中传递一个watch参数，他就会在本地起一个服务去监听文件的变化。但是，这种情况并不会给我们搭建一个web服务器，我们任然需要自己搭建一个web服务器。并且将我们搭建的web 服务器指向输出的地址。
运行：在命令行中输入webapck-watch或者简写为webpack -w
clean-webapck-plugin插件：重新生成打包文件，不要以前旧的打包文件。
运用：
var CleanWebpackPlugin = require('clean-webpack-plugin')
plugins:[
new CleanWebapckPlguin(['dist']) //新建一个实例，传递一个数组，数组里边传递一个我们每次打包的时候需要清除的目录。
···
2. webpack-dev-server
官方提给我们的开发服务器 ，可以集成非常多的功能。
live reloading重新刷新浏览器
不可以打包文件。只能做到本地的调试，和本地的开发。
路径的重定向
支持https
在浏览器中显示编译错误
接口代理
模块热更新：不再刷新浏览器的情况下，来更新我们的代码
配置：
devServer
inline模式，通常情况下为true，有两个模式inlne:true;inline:false
contentBase:提供内容的路径，默认情况下不用指定,当前的工作目录
port 端口，监听本地localhost端口
historyApiFallback如果用html5的historyApi的时候，直接访某一个路径不会导致404
https 直接设置https为true，本地将会生成相关的证书；也可以通过https指定自己生成的证书。
proxy可以通过其进行接口远程的代理
hot通过将hot 打开，webpack devServer支持模块热更新。模块热更新是指在某个时间内将要我们替换的代码替换掉。相当于提供了一个钩子，在钩子触发的时候，进行代码替换的一些操作。
openpage指定webpack devServer最先打开那个页面，指定初始页面的配置。
lazy指的是通过打开lazy，相当于将webpack devSever置成懒模式，适用于多个页面
overlay遮罩，相当于webpack devServer给我们提供了一个错误提示，在浏览器打开页面中一个遮罩，在遮罩上显示错误。
安装：npm install webpack-dev-server --save-dev
运用：
配置：webpack.config.js
module.export = {
devServer: {
inline:false,
port:9090,
//historyApiFallback:true
historyApiFallback: {
//rewrites: [
//from:'.pages/a',
//to: 'pages/a.html'
//]
rewrites: [
from:'/^\ /([a-zA-Z0-9]+\ /?) ([a-zA-Z0-9]+)/',
to: function(context){
return '/' + context.match[1] + context.match[2] + '.html'
}
]
}
}
}
运行：命令行
node_modules/.bin/webpack-dev-server --open
package.json
“scripts":{
"server":"webpack-dev-server --open"
}
npm run server运行，打开页面
配置路径
output: {
publicPath:'/', //指定根目录
}
proxy可以通过其进行接口远程的代理
代理远程接口请求，集成第三方包
http-proxy-middleware
参数：options
target代理的路径去哪里
changeOrigin 改变url，参数默认为false，调试写成true
headers给我们的http-proxy增加他的http请求的头，通过headers去增加我们代理的请求的头。
logLevel 帮助调试，在控制台或者在命令行工具中显示代理的情况，包括所有代理的信息
pathRewrite帮助你去重定向一个接口的请求
devServer.proxy设置成功
deServer: {
proxy: {
'/': {
target:'https://m.weibo.cn',
changeOrigin:true //请求成功，帮助我们将要请求的地址。
logLevel:'debug',//在命令行中看到更加详细的信息
pathRewrite: {
'^/comments':'/api/comments'//自己重定向规则
},
headers: {
Cookie:''//添加一些请求头
}
}
}
}
Module Hot Reloading模块热更新
不重新刷新浏览器的情况下，可以更新前端的代码。
好处：
一、保持应用的数据状态；
二、节省调试时间；
三、样式调试更快。
devServer.hot
webpack.HotModuleReplacementPlugin
webpack.NamedModulesPlugin
module.hot对代码进行热更新的操作
module.hot.accept接受两个参数 ，依赖，依赖的回调
module.hot.decline
使用：
webpack.config.js
devServer:{
hot:true,
hotOnly:true
}
plugins:[
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin()
]
3. express + webpack-dev-middleware
借助第三方express 和webapck-dev-middleware实现
