注:以下教程都是在windows环境下实现的,使用其他操作系统的同学在实践过程中可能会有一些差异。上一章我们了解了webpack的ES6编译环境搭建:webpack项目搭建:(2)ES6编译环境搭建本章我们将结合webpack的webpack-dev-server来介绍搭建本地测试服务器的过程。一、上期回顾上一章,我们将Babel与webpack结合,搭建了一个可以使用ES6语法的开发构建平台。(源码下载地址:https://github.com/xh4722/web...)项目结构如下:接下来我们将扩展我们的webpackDemo,让我们的项目具备本地开发的能力。2.开发环境、测试环境和生产环境我们在项目开发过程中一般需要经历三个环境:开发环境、测试环境和生产环境。开发环境是指程序员开发软件功能和编写代码时的程序运行环境;测试环境是从开发环境过渡到生产环境,是软件功能开发好,代码正式上线后进一步测试的环境。;生产环境是代码打包发布到正式线上的环境;不同的环境有不同的使用场景,对我们的webpack配置的要求也会不同。开发环境中需要的是提高开发效率,所以需要错误跟踪调试、自动编译、热替换(HMR)、代理(proxy)和本地数据Mock等;测试环境需要模拟线上环境,所以一般会Clone一个生产环境的配置,使用一些测试工具跑测试用例;生产环境需要将代码提交到线上,直接面向用户,这就要求我们打包后的代码体积更小,加载速度更快,所以打包的重点是代码压缩、拆分、合并等优化操作.下面就从开发环境入手,一步步搭建一个高效的webpack开发环境。3、webpack开发环境webpack有一些专门用于开发环境的特性,可以帮助我们搭建更好的开发环境。错误跟踪:webpack打包后的代码经过重新排列和组织,很难定位代码错误的位置。Javascript提供了sourcemap功能,可以通过webpack的devtool进行配置。源映射用于将编译后的代码映射回原始代码,从而更容易追踪错误和警告。sourcemap有很多不同的选项,各个选项的作用可以在devtool中查看,这里不做说明。开发环境一般使用eval-source-map、cheap-eval-source-map或cheap-module-eval-source-map,因为这些选项提供sourcemap,代码重构速度最快,适合A开发需要频繁更改代码的环境。自动编译:代码在开发过程中会经常修改。如果每次修改都需要执行webpack打包生成文件,开发效率肯定会很低。webpack提供了三种方式来实现源文件的自动编译功能:(1)webpack--watch;(2)webpack-开发服务器;(3)webpack-dev-中间件;4.webpack--watchfirstlet我们来试试第一种自动编译的方法,在webpackDemo目录下执行webpack--watch:监控服务。在浏览器中打开我们的index.html页面,Helloworld!一秒后弹出弹窗:现在让我们修改当前目录下的index.js文件,把'Helloworld!'改成弹出窗口中的信息为“Hellowebpack!”并保存:index.js控制台信息输出如下:可以看到webpack检测到了入口文件的变化,自动执行了打包工作。让我们刷新我们的页面,看看Hellowebpack!弹出窗口在一秒钟后弹出。5.webpack-dev-serverwebpack--watch解决入口文件更改后自动编译的问题,但每次修改后需要手动刷新页面才能看到最新效果。我们可以使用webpack-dev-server来解决手动刷新的问题。webpack-dev-server提供了一个简单的web服务器,并提供了livereloading的功能。在正式使用之前,我们先做一些准备工作。通过cnpm安装模块:cnpmi--save-devwebpack-dev-server@2。(webpack-dev-server@3.1.0只支持webpackv4)修改webpack.config.js:安装webpack-dev-server后,我们需要在webpack.config.js中通过devServer配置服务启动环境。修改webpack.config.js文件如下:webpack.config.js我们修改了两个地方:(1)将output.filename改为'./dist/test.js';(2)添加devServer并配置资源路径为输出文件'./dist'所在位置;现在让我们在当前目录执行服务启动命令:webpack-dev-server服务,我们可以在浏览器中输入http://localhost:8080查看效果:界面显示CannotGET/找不到文件,这是因为webpack-dev-server默认会打开资源目录(./dist)下的index.html文件,但是我们的webpack.config.js只配置了output输出文件为'./dist/test.js',dist目录下没有index.html文件。那么如何在dist目录下生成index.html文件呢?我们可以使用HtmlWebpackPlugin来完成Html文件的创建过程:安装HtmlWebpackPlugin:cnpmi--save-devhtml-webpack-plugin;启用webpack.config.js中的HtmlWebpackPlugin:webpack.config.js我们在webpack.config.js中通过webpack.config.js的plugins声明并导入了HtmlWebpackPlugin。现在让我们重启webpack-dev-server并打开浏览器:服务启动正常。现在我们修改index.js文件的弹窗信息为'Hellowebpack-dev-server!',可以看到在控制台中自动重新编译了webpack-dev-server,页面自动刷新后编译完成:现在让我们休息一下,回顾上面webpack-dev-server的构建过程,我们可以发现几个有趣的地方:在我们启动webpack-dev-server之前,我们并没有使用webpack来生成实际的./dist文件。启动服务时,我们的文件目录如下:即里面生成了webpack-dev-server使用的./dist目录。当我们在不配置任何参数的情况下使用HtmlWebpackPlugin时,它是如何在./dist目录下生成index.html文件并引用output输出的test.js文件的呢?(这里我的猜测是HtmlWebpackPlugin会获取输出设置,并根据设置执行Html生成过程)六、webpack-dev-server启动优化让我们在上面的webpack-dev-server的基础上做一些优化,所以那serverworksbetter:Openthebrowserautomatically:上面我们每次重启webpack-dev-server都需要手动打开浏览器输入url,我们可以使用open参数让webpack-dev-server打开启动成功后自动翻页。启动webpackDemo目录下的服务:webpack-dev-server--open,可以看到页面自动打开;简化启动命令:添加open参数后,每次启动都需要输入命令webpack-dev-server--open,命令很长,我们可以通过package.json的scripts项来简化启动命令.做完上面的配置后,只需要执行命令:npmsatrt(npmstart是npmrunstart的缩写,其他可以缩写的命令还有npmtest、npmstop、npmrestart),就可以发现服务已正常启动。7.使用Node.js结合webpack-dev-server也可以使用Node.jsAPI结合webpack-dev-server搭建服务器。新建一个server.js文件用于编写服务器代码:server.js在server.js中我们引入了webpack-dev-server并启动了localhost:8080服务。接下来打开我们的package.json文件,修改我们的启动命令:package.json在当前目录下执行命令:npmstart服务启动成功后,在浏览器中输入http://localhost:8080打开网页,并且代码执行成功:但是我们发现两个问题:服务器启动成功后浏览器不会自动打开;修改index.js后会重新编译代码,但浏览器不会刷新;下面我们来尝试解决这两个问题:1.我们可以引入webpack-browser-plugin来实现自动打开浏览器的功能:安装webpack-browser-plugin模块:cnpmi--save-devwebpack-browser-plugin;在webpack.config.js中使用这个插件:webpack.config.js再次执行命令npmstart,可以发现浏览器自动打开了http://localhost:8080;对于问题2,我们可以在webpack.config.js的entry属性中加入'webpack-dev-server/client'?http://localhost:8080':8.webpack-dev-middleware启动本地服务的第三种方式就是使用webpack-dev-middleware。webpack-dev-middleware是webpack-dev-server内部使用的容器,可以将webpack处理后的文件传递给服务器。我们可以使用express和webpack-dev-middleware来构建本地服务。安装express和webpack-dev-middleware:cnpmi--save-devexpresswebpack-dev-middleware@2;(webpack-dev-middleware@3.1.0只支持webpackv4)新建server.js文件配置expressServer:server.js修改package.json脚本,添加npmrunserver命令:执行npmrunserver启动express服务器;打开浏览器,输入网址http://localhost:3000,程序运行正常;修改index.js,弹出'Hellowebpack-dev-middleware!'弹出窗口;index.jsexpressserver自动编译,但是浏览器不会自动刷新,手动刷新浏览器,更新成功:九、webpack-dev-middleware优化上一节中的expressserver可以实现自动编译的功能,但是界面无法自动重载,排查问题原因。谷歌查找问题,解释如下:截图来自:https://blog.cloudboost.io/li...可以看出出现这个问题的原因是webpack-dev-server内置了-在热加载模块中,因此它可以检测文件更改并自动加载页面;而webpack-dev-middleware仅用于处理文件更改,无法控制浏览器的重新加载。要实现express的热加载功能,还需要另外一个中间件webpack-hot-middleware。热更新的具体实现将在下一章介绍。参考:AnIntroductiontoSourceMapswebpack中文文档
