怎么仿做网站,湖南株洲已发现16名感染者,给网站首页图片做外网超链接_为什么会弹出一个服务器登录窗口,资讯网站源码概述
毋庸置疑#xff0c;对前端开发者而言#xff0c;当下正是一个日升月恒的美好时代#xff01;在久远的过去#xff0c;Web 页面的开发技术链条非常原始而粗糙#xff0c;那时候的 JavaScript 更多用来点缀 Web 页面交互而不是用来构建一个完整的应用。直到 2009年5月…概述
毋庸置疑对前端开发者而言当下正是一个日升月恒的美好时代在久远的过去Web 页面的开发技术链条非常原始而粗糙那时候的 JavaScript 更多用来点缀 Web 页面交互而不是用来构建一个完整的应用。直到 2009年5月 Ryan Dahl 正式发布 NodeJSJavaScript 终于有机会脱离 Web 浏览器独立运行随之而来的是基于 JavaScript 构建应用程序的能力被扩展到越来越多场景我们得以用相同的语言、技术栈、工具独立开发桌面端、服务端、命令行、微前端、PWA 等应用形态。
相应地我们需要更好的构建、模块化以及打包能力来应对不同形态的工程化需求所幸 Webpack 提供的功能特性能够充分支撑这些场景。
前面两个章节我们已经详细介绍了如何使用 Webpack 构建 NPM Library以及如何基于 Module Federation 搭建微前端架构。本文将继续汇总这些特化场景需求包括
如何使用 Webpack 构建 Progressive Web Apps 应用如何使用 Webpack 构建 Node 应用如何使用 Webpack 构建 Electron 应用。
构建 PWA 应用
PWA 全称 Progressive Web Apps (渐进式 Web 应用)原始定义很复杂可以简单理解为 一系列将网页如同独立 APP 般安装到本地的技术集合借此我们即可以保留普通网页轻量级、可链接(SEO 友好)、低门槛只要有浏览器就能访问等优秀特点又同时具备独立 APP 离线运行、可安装等优势。
实现上PWA 与普通 Web 应用的开发方法大致相同都是用 CSS、JS、HTML 定义应用的样式、逻辑、结构两者主要区别在于PWA 需要用一些新技术实现离线与安装功能
ServiceWorker 可以理解为一种介于网页与服务器之间的本地代理主要实现 PWA 应用的离线运行功能。例如 ServiceWorker 可以将页面静态资源缓存到本地用户再次运行页面访问这些资源时ServiceWorker 可拦截这些请求并直接返回缓存副本即使此时用户处于离线状态也能正常使用页面 manifest 文件描述 PWA 应用信息的 JSON 格式文件用于实现本地安装功能通常包含应用名、图标、URL 等内容例如 // manifest.json
{icons: [{src: /icon_120x120.0ce9b3dd087d6df6e196cacebf79eccf.png,sizes: 120x120,type: image/png}],name: My Progressive Web App,short_name: MyPWA,display: standalone,start_url: .,description: My awesome Progressive Web App!
}我们可以选择自行开发、维护 ServiceWorker 及 manifest 文件 也可以简单点使用 Google 开源的 Workbox 套件自动生成 PWA 应用的壳首先安装依赖
yarn add -D workbox-webpack-plugin webpack-pwa-manifest其中
workbox-webpack-plugin用于自动生成 ServiceWorker 代码的 Webpack 插件webpack-pwa-mainifest根据 Webpack 编译结果自动生成 PWA Manifest 文件的 Webpack 插件。
之后在 webpack.config.js 配置文件中注册插件
const HtmlWebpackPlugin require(html-webpack-plugin);
const { GenerateSW } require(workbox-webpack-plugin);
const WebpackPwaManifest require(webpack-pwa-manifest);module.exports {// ...plugins: [new HtmlWebpackPlugin({title: Progressive Web Application,}),// 自动生成 Manifest 文件new WebpackPwaManifest({name: My Progressive Web App,short_name: MyPWA,description: My awesome Progressive Web App!,publicPath: /,icons: [{// 桌面图标注意这里只支持 PNG、JPG、BMP 格式src: path.resolve(src/assets/logo.png),sizes: [150],},],}),// 自动生成 ServiceWorker 文件new GenerateSW({clientsClaim: true,skipWaiting: true,}),],
};之后执行编译命令如 npx webpack 就可以生成如下资源
├─ 8-1_pwa
│ ├─ src
│ │ ├─ xxx
│ ├─ dist
│ │ ├─ icon_150x150.119e95d3213ab9106b0f95100015a20a.png
│ │ ├─ index.html
│ │ ├─ main.js
│ │ ├─ manifest.22f4938627a3613bde0a011750caf9f4.json
│ │ ├─ service-worker.js
│ │ ├─ workbox-2afe96ff.js
│ └─ webpack.config.js接下来运行并使用 Chrome 打开页面打开开发者工具切换到 Applicatios Service Workers 面板可以看到 这表明 Service Worker 已经正常安装到浏览器上。此外地址栏右方还会出现一个下载图标 点击该图标可将应用下载到本地并在桌面创建应用图标 —— 效果如同安装独立 App 一样。 提示PWA 是一种复杂度较高的技术前文只是介绍了一种 Webpack 构建 PWA 的简单方法感兴趣的同学可以扩展阅读 developer.chrome.com/docs/workbo…developers.google.com/web/fundame… 构建 Node 应用
注意在开发 Node 程序时使用 Webpack 的必要性并不大因为 Node 本身已经有完备的模块化系统并不需要像 Web 页面那样把所有代码打包成一个或几个产物文件即使是为了兼容低版本 Node 环境也可以使用更简单的方式解决 —— 例如 Babel引入 Webpack 反而增加了系统复杂度以及不少技术隐患。
不过出于学习目的我们还是可以了解一下使用 Webpack 构建 Node 程序的方法及注意事项包括
需要 Webpack 的 target 值设置为 node 这能让 Webpack 忽略 fs/path 等原生 Node 模块需要使用 externals 属性过滤 node_modules 模块简单起见也可以直接使用 webpack-node-externals 库需要使用 node 属性正确处理 __dirname、__filename 值。
一个典型的 Node 构建配置如下
const nodeExternals require(webpack-node-externals);module.exports merge(WebpackBaseConfig, {// 1. 设置 target 为 nodetarget: node,entry: ...,module: [...],// 2. 过滤 node_modules 模块externals: [nodeExternals()],// 3. 设置 __dirname, __filename 值node: {__filename: false,__dirname: false,},
});在此基础上我们可以复用大多数 Loader、Plugin 及 Webpack 基础能力实现各种构建功能。
不过需要特别注意在 Node 代码中请务必慎用动态 require 语句你很可能会得到预期之外的效果例如对于下面的示例目录
├─ example
│ ├─ src
│ │ ├─ foo.js
│ │ ├─ bar.js
│ │ ├─ unused.js
│ │ └─ main.js
│ ├─ package.json
│ └─ webpack.config.js其中 main.js 为入口文件代码
const modules [foo, bar].map(r require(./${r}.js));可以看到在 main.js 中并没有引用 unused.js 但打包产物中却包含了 src 目录下所有文件
这是因为 Webpack 遇到示例中的 require 语句时仅仅依靠词法规则、静态语义、AST 等手段并不能推断出实际依赖情况只能退而求其次粗暴地将所有可能用到的代码一股脑合并进来这种处理手段很可能会带来许多意想不到的结果很可能触发 BUG
综上建议尽量不要使用 Webpack 构建 Node 应用。
构建 Electron 应用
Electron 是一种使用 JavaScript、HTML、CSS 等技术构建跨平台桌面应用开发框架这意味着我们能用我们熟悉的大部分 Web 技术 —— 例如 React、Vue、Webpack 等开发桌面级应用程序。实际上许多大名鼎鼎的应用如 VSCode、Facebook Messenger、Twitch以及国内诸多小程序 IDE 都是基于 Electron 实现的。
与 Web 页面不同Electron 应用由一个 主进程 及若干 渲染进程 组成进程之间以 IPC 方式通讯其中
主进程是一个 Node 程序能够使用所有 Node 能力及 Electron 提供的 Native API主要负责应用窗口的创建与销毁、事件注册分发、版本更新等渲染进程本质上是一个 Chromium 实例负责加载我们编写的页面代码渲染成 Electron 应用界面。 提示Chromium 是一个非常简洁的开源浏览器许多浏览器都基于 Chromium 二次开发而成例如 Chrome、Microsoft Edge、Opera 等。
Electron 这种多进程机构要求我们能在同一个项目中同时支持主进程与若干渲染进程的构建两者打包需求各有侧重。接下来我们将通过一个简单示例逐步讲解如何使用 Webpack 搭建一套完备的 Electron 应用构建环境示例文件结构如下
8-3_electron-wp
├─ package.json
├─ webpack.main.config.js // 主进程构建配置
├─ webpack.renderer.config.js // 渲染进程构建配置
├─ src
│ ├─ main.js
│ ├─ pages
│ │ ├─ home
│ │ ├─ index.js
│ │ ├─ login
│ │ ├─ index.js其中
src/main.js 为主进程代码src/pages/${page name}/ 目录为渲染进程 —— 即桌面应用中每一个独立页面的代码由于主进程、渲染进程的打包差异较大这里为方便演示直接写成两个配置文件webpack.main.config.js 与 webpack.renderer.config.js。
Electron 主进程打包配置
主进程负责应用窗口的创建销毁以及许多跨进程通讯逻辑可以理解为 Electron 应用的控制中心简单示例
// src/main.js
const { app, BrowserWindow } require(electron);// 应用启动后
app.whenReady().then(() {// 创建渲染进程实例const win new BrowserWindow({width: 800,height: 600});// 使用 BrowserWindow 实例打开页面win.loadFile(home.html);
});代码核心逻辑是在应用启动后 app.whenReady 钩子创建 BrowserWindow 实例并打开页面。
提示建议结合 Electron 官方提供的 完整示例 一起学习。
Electron 主进程本质上是一个 Node 程序因此许多适用于 Node 的构建工具、方法也同样适用主进程例如 Babel、TypeScript、ESLint 等。与普通 Node 工程相比构建主进程时需要注意
需要将 target 设置为 electron-main Webpack 会自动帮我们过滤掉一些 Electron 组件如 clipboard、ipc、screen 等需要使用 externals 属性排除 node_modules 模块简单起见也可以直接使用 webpack-node-externals 包生产环境建议将 devtools 设置为 false减少包体积。
对应的配置脚本
// webpack.main.config.js
const path require(path);
const nodeExternals require(webpack-node-externals);module.exports {// 主进程需要将 target 设置为 electron-maintarget: electron-main,mode: process.env.NODE_ENV || development,// 开发环境使用 source-map保持高保真源码映射方便调试devtool: process.env.NODE_ENV production? false: source-map,entry: {main: path.join(__dirname, ./src/main),},output: {filename: [name].js,path: path.join(__dirname, ./dist),},externals: [nodeExternals()],
};至此一个非常简单的主进程脚本与构建环境示例就搭建完毕了执行下述命令即可完成构建工作
npx webpack -c webpack.main.config.js另外安装 Electron 过程中可能会遇到网络超时问题这是因为资源域已经被墙了可以使用阿里云镜像解决
ELECTRON_MIRRORhttps://cdn.npm.taobao.org/dist/electron/ npm i -D electronElectron 渲染进程打包配置
Electron 渲染进程本质上就一个运行在 Chromium 浏览器上的网页开发方法基本等同于我们日常开发的普通 Web 页面例如我们可以用 React 开发 Electron 渲染进程
// src/home/index.js
import React from react;
import ReactDOM from react-dom;const root document.createElement(div);ReactDOM.render(h1Hello world!/h1, root);document.body.append(root);相应的我们可以复用大部分普通 Web 页面构建的方式方法主要差异点
需要将 Webpack 的 target 配置设置为 electron-rendererElectron 应用通常包含多个渲染进程因此我们经常需要开启多页面构建配置为实现渲染进程的 HMR 功能需要对主进程代码稍作改造。
第一点很简单
// webpack.renderer.config.js
module.exports {// 渲染进程需要将 target 设置为 electron-renderertarget: electron-renderer
};提示Webpack 为 Electron 提供了三种特殊 target 值electron-main/electron-renderer/electron-preload分别用于主进程、Renderer 进程、Preload 脚本三种场景。 第二点可以用多 entry 配置实现如
// webpack.renderer.config.js
// 入口文件列表
const entries {home: path.join(__dirname, ./src/pages/home),login: path.join(__dirname, ./src/pages/login),
};// 为每一个入口创建 HTMLWebpackPlugin 实例
const htmlPlugins Object.keys(entries).map((k) new HtmlWebpackPlugin({title: [${k}] My Awesome Electron App,filename: ${k}.html,chunks: [k],})
);module.exports {mode: process.env.NODE_ENV || development,entry: entries,target: electron-renderer,plugins: [...htmlPlugins],// ...
};第三点由于 Webpack 的 HMR 功能强依赖于 WebSocket 实现通讯但 Electron 主进程常用文件协议 file:// 打开页面该协议不支持 WebSocket 接口为此我们需要改造主进程启动代码以 HTTP 方式打开页面代码如
function createWindow() {const win new BrowserWindow({//...});if (process.env.NODE_ENV development) {// 开发环境下加载 http 协议的页面方便启动 HMRwin.loadURL(http://localhost:8080/home);} else {// 生产环境下依然使用 file:// 协议win.loadFile(path.join(app.getAppPath(), home.html));}
}提示在生产环境中出于性能考虑Electron 主进程通常会以 File URL Scheme 方式直接加载本地 HTML 文件这样我们就不必为了提供 HTML 内容而专门启动一个 HTTP 服务进程。不过同一份代码用 File URL Scheme 和用 HTTP 方式打开浏览器提供的接口差异较大开发时注意区分测试接口兼容性。
至此改造完毕
总结
综上Webpack 不仅能构建一般的 Web 应用理论上还适用于一切以 JavaScript 为主要编程语言的场景包括 PWA、Node 程序、Electron 等只是不同场景下的具体构建需求略有差异
PWA需要使用 workbox-webpack-plugin 自动生成 ServiceWorker 代码使用 webpack-pwa-mainifest Manifest 文件Node 程序需要设置 Webpack 配置项 target node需要使用 externals 属性过滤 node_modules 模块需要使用 node 属性正确处理 Node 全局变量Electron 桌面应用需要为主进程、渲染进程分别设置不同的构建脚本同时需要注意开发阶段使用 HMR 的注意事项。
这种强大、普适的构建能力正是 Webpack 的核心优势之一同类工具无出其右者虽然不能一招鲜吃天下但也足够覆盖大多数前端应用场景。站在学习的角度你可以将主要精力放在 Webpack 基础构建逻辑、配置规则、常用组件上遇到特殊场景时再灵活查找相应 Loader、Plugin 以及其它生态工具就可以搭建出适用的工程化环境。
