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实现