脚本宝典收集整理的这篇文章主要介绍了

webpack 项目构建:(三)开发环境——本地服务器搭建

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

注:以下教程均在 windows 环境实现,使用其他操作系统的同学实践过程可能会有些出入。

  上一章我们了解了 webpack 的 ES6 编译环境搭建:webpack 项目构建:(二)ES6 编译环境搭建
  这一章我们会结合 webpack 的 webpack-dev-server,介绍本地测试服务器的搭建过程。

一、上期回顾

  上一章我们在 webpack 上结合了 Babel,搭建了一个可以使用 ES6 语法的开发构建平台。(源码下载地址:https://github.com/xh4722/web...
  项目结构如下:
webpack 项目构建:(三)开发环境——本地服务器搭建-脚本宝典
  下面我们将扩展我们的 webpackDemo,赋予我们项目本地开发的能力。

二、开发环境、测试环境和生产环境

  我们在项目开发过程中一般需要经历三个环境:开发环境、测试环境和生产环境。

  1. 开发环境是指程序员在开发软件功能、编写代码时的程序运行环境;
  2. 测试环境是开发环境到生产环境的过渡,是软件功能开发完成,在将代码正式发布到线上时进行进一步测试的环境;
  3. 生产环境是将代码打包发布到正式线上所运行的环境;

  不同环境的使用场景不同,对我们的 webpack 配置要求也会不一样。

  1. 在开发环境需要的是提高开发效率,所以会需要错误跟踪调试、自动编译、热替换(HMR)、代理(proxy)和本地数据 Mock 等等;
  2. 测试环境需要的是模拟线上环境,所以一般是克隆一份生产环境的配置,并利用一些测试工具运行测试用例;
  3. 生产环境需要将代码提交到线上,是直接面向用户的,这就要求我们打包的代码有更小的体积、更快的加载速度,所以打包的重点是代码压缩、拆分、合并等优化操作。

  我们先从开发环境入手,一步步搭建一个高效的 webpack 开发环境。

三、webpack 开发环境

  webpack 有一些特性是专门用于开发环境的,可以帮助我们搭建一个更好的开发环境。

  1. 错误跟踪:webpack 打包后的代码是经过重新整理和组织的,这就会造成代码出错的位置很难定位。Javascript 提供了 source map 功能,通过 webpack 的 devtool 可以进行配置。source map 用于将编译后的代码映射回原始代码,可以更容易地追踪错误和警告。source map 有很多不同的选项,每个选项的作用可以在 devtool 中查看,这里不做说明。一般在开发环境会使用 eval-source-map、cheap-eval-source-map 或者 cheap-module-eval-source-map,因为这几个选项提供了 source map 而且有最快的代码重构建速度,适合需要频繁修改代码的开发环境。
  2. 自动编译:开发过程会经常性地修改代码,如果每次修改都需要执行 webpack 打包生成文件,开发效率肯定是很低的。webpack 提供了三种方式用来实现源文件的自动编译功能:(1)webpack --watch;(2)webpack-dev-server;(3)webpack-dev-middleware;

四、webpack --watch

  先让我们试用一下自动编译的第一种方式,在 webpackDemo 的目录下执行 webpack --watch:
webpack 项目构建:(三)开发环境——本地服务器搭建-脚本宝典
  可以看到在执行了 webpack --watch 命令以后,该命令并不会马上结束,webpack 启动了一个监听服务。
  在浏览器中打开我们的 index.html 页面,过了一秒弹出 Hello world! 弹窗:
图片描述

  现在让我们修改当前目录的 index.js 文件,将弹窗内的 'Hello world!' 信息修改为 'Hello webpack!' 并保存:

index.js
图片描述

  控制台信息输出如下:
webpack 项目构建:(三)开发环境——本地服务器搭建-脚本宝典
  可以看到 webpack 检测到了入口文件的变更并自动执行了打包工作。
  让我们刷新我们的页面,可以看到过了一秒弹出 Hello webpack! 弹窗。
图片描述

五、webpack-dev-server

  webpack --watch 解决了入口文件变更后自动编译的问题,但是每次修改以后都需要手动刷新页面才能看到最新的效果。我们可以使用 webpack-dev-server 解决手动刷新的问题。
  webpack-dev-server 提供了一个简单的 web 服务器,并提供了实时加载(live reloading)的功能。在正式使用前我们先做一些准备工作。

  1. 通过 cnpm 安装模块:cnpm i --save-dev webpack-dev-server@2。(webpack-dev-server@3.1.0 只支持 webpack v4)
  2. 修改 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
webpack 项目构建:(三)开发环境——本地服务器搭建-脚本宝典
  从控制台信息可以看出 webpack-dev-server 启动了一个默认端口号为 8080 的本地服务,我们可以在浏览器中输入 http://localhost:8080 查看效果:
webpack 项目构建:(三)开发环境——本地服务器搭建-脚本宝典
  界面显示 Cannot GET / 找不到文件,这是因为 webpack-dev-server 会默认打开资源目录(./dist)下的 index.html 文件,但是我们的 webpack.config.js 只配置了 output 输出文件为 './dist/test.js',在 dist 目录下并不存在 index.html 文件。
  那么怎么在 dist 目录下生成 index.html 文件呢?我们可以使用 HtmlWebpackPlugin 完成 Html 文件的创建过程:

  1. 安装 HtmlWebpackPlugin:cnpm i --save-dev html-webpack-plugin
  2. 在 webpack.config.js 中启用 HtmlWebpackPlugin:
    webpack.config.js
    图片描述

  我们在 webpack.config.js 中声明了 HtmlWebpackPlugin,并通过 webpack.config.js 的 plugins 引入该插件。
  现在让我们重新启动 webpack-dev-server 并打开浏览器:
webpack 项目构建:(三)开发环境——本地服务器搭建-脚本宝典
  服务启动正常。现在我们修改 index.js 文件的弹窗信息为 'Hello webpack-dev-server!',可以看到控制台中 webpack-dev-server 自动重新编译,编译完成后,页面自动刷新:
图片描述

  现在让我们稍微休息一下,回顾一下上面 webpack-dev-server 的搭建过程,可以发现几个比较有意思的地方:

  1. 在我们启动 webpack-dev-server 之前,我们并没用通过 webpack 生成实际的 ./dist 文件。在启动服务时,我们的文件目录如下:
    webpack 项目构建:(三)开发环境——本地服务器搭建-脚本宝典
    也就是说 webpack-dev-server 使用的 ./dist 目录是在它内部生成的。
  2. 我们在使用 HtmlWebpackPlugin 时没有配置任何参数,它又是怎么在 ./dist 目录下生成 index.html 文件,并引用 output 输出的 test.js 文件的呢?(我这边大概的猜测是 HtmlWebpackPlugin 会获取 output 的设置,并根据该设置执行 Html 生成过程)

六、webpack-dev-server 启动优化

  让我们在上面的 webpack-dev-server 基础上做一些优化,让服务器工作得更好:

  1. 自动打开浏览器:上面我们每次重启 webpack-dev-server 之后都需要手动打开浏览器并输入网址,我们可以使用 open 参数让 webpack-dev-server 启动成功后自动打开页面。在 webpackDemo 目录下启动服务:webpack-dev-server --open,可以看到页面自动打开了;
  2. 简化启动命令:加入 open 参数以后每次启动都需要输入命令 webpack-dev-server --open,命令很长,我们可以通过 package.json 的 scripts 项简化启动命令。
    webpack 项目构建:(三)开发环境——本地服务器搭建-脚本宝典
    做了如上配置以后,只需要执行命令:npm satrt(npm start 是 npm run start 的简写,其他可以简写的命令还有 npm test、npm stop、npm restart),可以发现服务正常启动了。

七、使用 Node.js 结合 webpack-dev-server

  还可以使用 Node.js API 结合 webpack-dev-server 构建服务器。新建一个 server.js 文件,用于编写服务器代码:

server.js
图片描述

  在 server.js 里我们引入了 webpack-dev-server,并启动了 localhost:8080 服务。
  接下来打开我们的 package.json 文件,修改我们的启动命令:
package.json
图片描述

  在当前目录执行命令:npm start
  服务启动成功后在浏览器中输入 http://localhost:8080 打开网页,代码执行成功:
图片描述

  但是我们发现有两个问题:

  1. 在服务器启动成功后浏览器不会自动打开;
  2. 在修改 index.js 后代码会重新编译,但是浏览器却不会刷新;

  让我们尝试解决这两个问题:

  1. 针对问题1,我们可以引入 webpack-browser-plugin 实现自动打开浏览器的功能:

    • 安装 webpack-browser-plugin 模块:cnpm i --save-dev webpack-browser-plugin;
    • 在 webpack.config.js 中使用该插件:
      webpack.config.js
      图片描述
    • 再次执行命令 npm start,可以发现浏览器自动打开 http://localhost:8080;
  2. 针对问题2,我们可以在 webpack.config.js 的 entry 属性中增加 'webpack-dev-server/client?http://localhost:8080':
    图片描述

八、webpack-dev-middleware

  第三种启动本地服务的方式是使用 webpack-dev-middleware。webpack-dev-middleware 是 webpack-dev-server 内部使用的一个容器,可以把 webpack 处理后的文件传递给一个服务器。我们可以通过 express 配合使用 webpack-dev-middleware 来搭建本地服务。

  1. 安装 express、webpack-dev-middleware:cnpm i --save-dev express webpack-dev-middleware@2;(webpack-dev-middleware@3.1.0 只支持 webpack v4)
  2. 新建 server.js 文件,用来配置 express 服务器:
    server.js
    图片描述
  3. 修改 package.json scripts,增加 npm run server 命令:
    图片描述
  4. 执行 npm run server 启动 express 服务器;
  5. 打开浏览器输入网址 http://localhost:3000,程序运行正常;
    图片描述
  6. 修改 index.js,弹出 'Hello webpack-dev-middleware!' 弹窗;
    index.js
    图片描述
  7. express 服务器自动编译,但是浏览器不会自动刷新,手动刷新浏览器,更新成功:
    图片描述

九、webpack-dev-middleware 优化

  上一节的 express 服务器可以实现自动编译的功能,但是无法自动重新加载界面,排查问题产生的原因。
  Google 查找问题,解释如下:
webpack 项目构建:(三)开发环境——本地服务器搭建-脚本宝典
  截图来自:https://blog.cloudboost.io/li...
  可以看出来,产生这个问题的原因是 webpack-dev-server 内置了热加载模块,所以能检测文件变更并自动加载页面;而 webpack-dev-middleware 只是用于处理文件的变更,并不能控制浏览器的重新加载。要实现 express 的热加载功能,就需要用到另外一个中间件 webpack-hot-middleware,热更新的具体实现将在下一章进行介绍。

参考资料:
An Introduction to Source Maps
webpack 中文文档

总结

以上是脚本宝典为你收集整理的

webpack 项目构建:(三)开发环境——本地服务器搭建

全部内容,希望文章能够帮你解决

webpack 项目构建:(三)开发环境——本地服务器搭建

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过