15、前端开发技术：Apollo、GraphQL与Webpack 4的实践应用

最新推荐文章于 2025-10-21 06:45:29 发布
最新推荐文章于 2025-10-21 06:45:29 发布
阅读量58 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 精通React：从基础到实战 文章标签： 前端开发 Apollo GraphQL
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/omega/article/details/150373072

前端开发技术：Apollo、GraphQL与Webpack 4的实践应用

1. Apollo、GraphQL与推文应用

1.1 推文样式设置

在推文应用中，我们可以通过CSS设置删除和编辑按钮的样式。以下是相关代码： 

.delete {
  position: absolute;
  right: 10px;
  bottom: 10px;
  cursor: pointer;
}
.edit {
  position: absolute;
  right: 30px;
  bottom: 10px;
  cursor: pointer;
}

1.2 推文操作流程

推文应用的操作流程如下：
1. 启动前端和后端（分别在不同终端），在浏览器访问 http://localhost:3000 即可看到应用界面。
2. 在文本框输入推文内容，点击 “Tweet it!” 按钮即可发布新推文。推文列表按时间降序排列，最新推文显示在顶部。
3. 若要编辑推文，点击编辑图标（铅笔图标），编辑完成后，移除文本框焦点（ onBlur ）即可保存修改。
4. 若要删除推文，点击删除图标（垃圾桶图标）即可。

1.3 GraphQL与Redux的关系

GraphQL 有可能取代 Redux，因为通过 ApolloProvider 可以直接访问数据，简化了数据获取和管理的过程。

2. Webpack 4 零配置

2.1 Webpack 4 简介

Webpack 是现代 JavaScript 应用的静态模块打包工具。从版本 4 开始，Webpack 无需配置文件即可打包项目，但仍可通过配置文件进行定制以满足不同需求。

2.2 操作步骤

  1. 创建项目文件夹并安装依赖 ： 
mkdir webpack-zero-configuration
cd webpack-zero-configuration
npm install --save-dev webpack webpack-cli
  1. 初始化 package.json 文件 ： 
npm init -y
  1. 配置 package.json 文件 ： 
{
  "name": "webpack-zero-configuration",
  "version": "1.0.0",
  "description": "Webpack 4 Zero Configuration",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "Carlos Santana",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15"
  }
}
  1. 运行打包命令 ： 
npm run build

此时可能会出现错误 ERROR in Entry module not found: Error: Can't resolver'./src' ，这是因为 Webpack 4 默认的入口文件是 src/index.js 。
5. 创建入口文件 ： 

// src/index.js
console.log('Index file...');
  1. 再次运行打包命令 ： 
npm run build

此时 Webpack 会在 dist 文件夹下生成 main.js 文件。同时，终端会提示未设置 mode 选项，Webpack 默认使用生产模式，生成的代码会被压缩和混淆。

2.3 模式设置

Webpack 4 有生产（ production ）和开发（ development ）两种模式。可以通过修改 package.json 文件来设置不同模式： 

{
  "name": "webpack-zero-configuration",
  "version": "1.0.0",
  "description": "Webpack 4 Zero Configuration",
  "main": "index.js",
  "scripts": {
    "build-development": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "Carlos Santana",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15"
  }
}

运行 npm run build-development 命令，生成的代码不会被压缩。

2.4 集成 Babel

若要使用 Babel 转译 ES6 代码，可按以下步骤操作：
1. 安装依赖 ： 

npm install --save-dev babel-loader babel-core babel-preset-env
  1. 创建 .babelrc 文件 ： 
{
  "presets": ["env"]
}
  1. 配置 webpack.config.js 文件 ： 
const webpackConfig = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};
module.exports = webpackConfig;
  1. 创建测试文件 ： 
// src/numbers.js
export const numbers = ['one', 'two', 'three'];

// src/index.js
import { numbers } from './numbers';
numbers.forEach(number => console.log(number));
  1. 运行打包命令 ： 
npm run build

也可以在终端直接使用 --module-bind 标志绑定加载器，而不使用配置文件： 

{
  "name": "webpack-zero-configuration",
  "version": "1.0.0",
  "description": "Webpack 4 Zero Configuration",
  "main": "index.js",
  "scripts": {
    "build-development": "webpack --mode development --module-bind js=babel-loader",
    "build": "webpack --mode production --module-bind js=babel-loader"
  },
  "author": "Carlos Santana",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15"
  }
}

2.5 其他绑定标志

Webpack CLI 还有其他绑定模块的标志：
- --module-bind-post ：将扩展名绑定到后置加载器。
- --module-bind-pre ：将扩展名绑定到前置加载器。

3. 向 Webpack 4 添加 React

3.1 准备工作

安装所需依赖： 

npm install react react-dom babel-preset-react

3.2 操作步骤

  1. 配置 .babelrc 文件 ： 
{
  "presets": [
    "env",
    "react"
  ]
}
  1. 修改 webpack.config.js 文件 ： 
const webpackConfig = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};
module.exports = webpackConfig;
  1. 创建 src/components/App.jsx 文件 ： 
// Dependencies
import React from 'react';
// Components
import Home from './Home';
const App = props => (
  <div>
    <Home />
  </div>
);
export default App;
  1. 创建 src/components/Home/index.jsx 文件 ： 
import React from 'react';
const Home = () => <h1>Home</h1>;
export default Home;
  1. 修改 src/index.jsx 文件 ： 
// Dependencies
import React from 'react';
import { render } from 'react-dom';
// Components
import App from './components/App';
render(<App />, document.querySelector('#root'));
  1. 安装 html-webpack-plugin 插件 ： 
npm install --save-dev html-webpack-plugin
  1. 修改 webpack.config.js 文件 ： 
const HtmlWebPackPlugin = require('html-webpack-plugin');
const webpackConfig = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      title: 'Codejobs',
      template: './src/index.html',
      filename: './index.html'
    })
  ]
};
module.exports = webpackConfig;
  1. 创建 src/index.html 文件 ： 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><%= htmlWebPackPlugin.options.title %></title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

3.3 解决问题

运行 npm run build 命令时可能会出现错误 Can't resolve ./src directory ，这是因为 Webpack 无法识别 .jsx 文件。需要在 webpack.config.js 文件中添加 resolve 节点： 

const HtmlWebPackPlugin = require('html-webpack-plugin');
const webpackConfig = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      title: 'Codejobs',
      template: './src/index.html',
      filename: './index.html'
    })
  ],
  resolve: {
    extensions: ['.js', '.jsx']
  }
};
module.exports = webpackConfig;

再次运行 npm run build 命令，即可成功打包， dist 目录下会生成 index.html 和 main.js 文件。

3.4 优化配置

为了更好地组织和管理 Webpack 配置文件，可按以下步骤操作：
1. 将 webpack.config.js 文件重命名为 webpack.config.babel.js ，Babel 会自动处理该文件。
2. 将 ES5 代码迁移到 ES6： 

import HtmlWebPackPlugin from 'html-webpack-plugin';
export default {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      title: 'Codejobs',
      template: './src/index.html',
      filename: './index.html'
    })
  ],
  resolve: {
    extensions: ['.js', '.jsx']
  }
};
  1. 创建 webpack/configuration 文件夹，并在其中创建各个配置文件： 
// webpack/configuration/module.js
export default {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: 'babel-loader'
    }
  ]
};

// webpack/configuration/plugins.js
import HtmlWebPackPlugin from 'html-webpack-plugin';
const plugins = [
  new HtmlWebPackPlugin({
    title: 'Codejobs',
    template: './src/index.html',
    filename: './index.html'
  })
];
export default plugins;

// webpack/configuration/resolve.js
export default {
  extensions: ['.js', '.jsx']
};
  1. 创建 webpack/configuration/index.js 文件： 
// Configuration
import module from './module';
import plugins from './plugins';
import resolve from './resolve';
export {
  module,
  plugins,
  resolve
};
  1. 修改 webpack.config.babel.js 文件： 
import {
  module,
  plugins,
  resolve
} from './webpack/configuration';
export default {
  module,
  plugins,
  resolve
};

2.6 操作流程总结

以下是 Webpack 4 零配置及集成 Babel 的操作流程： 

graph LR
    A[创建项目文件夹] --> B[安装依赖]
    B --> C[初始化package.json]
    C --> D[配置package.json]
    D --> E[运行打包命令]
    E --> F{是否报错}
    F -- 是 --> G[创建入口文件]
    G --> E
    F -- 否 --> H[设置模式]
    H --> I[集成Babel]

2.7 模式对比

模式 特点
生产模式（production） 代码会被压缩和混淆，适合部署到生产环境
开发模式（development） 代码不会被压缩，方便开发调试

4. 添加 Webpack Dev Server 和 CSS 预处理器

4.1 准备工作

安装所需依赖： 

npm install webpack-dev-server css-loader extract-text-webpack-plugin@v4.0.0-beta.0 style-loader

若要使用 Sass，需安装： 

npm install sass-loader node-sass

若使用 Stylus，需安装： 

npm install stylus-loader stylus

若使用 LessCSS，需安装： 

npm install less-loader less

4.2 添加 Webpack Dev Server

  1. 修改 package.json 文件 ： 
{
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build-development": "webpack --mode development",
    "build": "webpack --mode production"
  }
}

--mode 标志指定模式（默认是生产模式）， --open 标志在启动应用时打开浏览器。
2. 运行应用 ： 

npm start

应用默认使用端口 8080，若要更改端口，可使用 --port 标志： 

{
  "scripts": {
    "start": "webpack-dev-server --mode development --open --port 9999"
  }
}
  1. 实时更新示例 ：
    修改 src/components/Home/index.jsx 文件： 
import React from 'react';
const Home = () => <h1>Updated Home</h1>;
export default Home;

修改后，页面会自动更新，无需手动刷新。

4.3 添加 CSS 预处理器

4.3.1 修改 webpack/configuration/module.js 文件 
export default {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: 'babel-loader'
    },
    {
      test: /\.scss$/, // Can be: .scss or .styl or .less
      use: [
        {
          loader: 'style-loader'
        },
        {
          loader: 'css-loader',
          options: {
            // Enables CSS Modules
            modules: true,
            // Number of loaders applied before CSS loader
            importLoaders: 1,
            // Formatting CSS Class name
            localIdentName: '[name]_[local]_[hash:base64]',
            // Enable/disable sourcemaps
            sourceMap: true,
            // Enable/disable minification
            minimize: true
          }
        },
        {
          loader: 'sass-loader' // sass-loader or stylus-loader or less-loader
        }
      ]
    }
  ]
};
4.3.2 使用 Sass
  1. 创建 src/components/Home/Home.scss 文件 ： 
$color: red;
.Home {
  color: $color;
}
  1. 修改 src/components/Home/index.jsx 文件 ： 
import React from 'react';
import styles from './Home.scss'; // For Sass
const Home = () => <h1 className={styles.Home}>Updated Home</h1>;
export default Home;
4.3.3 使用 Stylus
  1. 创建 src/components/Home/Home.styl 文件 ： 
$color = green
.Home
  color: $color
  1. 修改 webpack/configuration/module.js 文件中的 test 和 loader 配置以适配 Stylus。
4.3.4 使用 LessCSS
  1. 创建 src/components/Home/Home.less 文件 ： 
@color: blue;
.Home {
  color: @color;
}
  1. 修改 webpack/configuration/module.js 文件中的 test 和 loader 配置以适配 LessCSS。

4.4 操作流程总结

以下是添加 Webpack Dev Server 和 CSS 预处理器的操作流程： 

graph LR
    A[安装依赖] --> B[修改package.json添加启动脚本]
    B --> C[运行应用]
    C --> D{是否更改端口}
    D -- 是 --> E[修改启动脚本添加端口设置]
    E --> C
    D -- 否 --> F[修改模块配置文件添加CSS预处理器规则]
    F --> G{选择CSS预处理器}
    G -- Sass --> H[创建Sass文件并引入]
    G -- Stylus --> I[创建Stylus文件并修改配置]
    G -- LessCSS --> J[创建LessCSS文件并修改配置]

4.5 不同 CSS 预处理器对比

预处理器 特点 示例文件扩展名
Sass 功能强大，支持变量、嵌套、混合等特性 .scss
Stylus 语法简洁，灵活性高 .styl
LessCSS 易于学习，与 CSS 语法相似 .less
使用Apollo Client实现GraphQL实时订阅
桂月二二博客
01-07 845
通过GraphQL的实时订阅功能，开发者能够更加便捷地实现具有实时交互的Web应用。在本文中，我们探讨了如何结合Apollo Client与React实现从零到完整的GraphQL订阅功能，并通过扩展示例进一步阐述复杂用例的实现。希望本文对你深入了解GraphQL订阅有所帮助，欢迎留言讨论或分享你在开发中的实践心得！
blog-frontend：使用GraphQL（Apollo）+ Vue + Nuxt.js + TypeScript + Vuetify创建的博客前端。
02-04
Документация： 后端 前端 Нафронтенд... Webpack 4（содержитбазовыеконфигиподкапотом，которыеиспользуютсячащевсего，ка
8、前端开发：从应用部署到 React 构建 Web 客户端
water的专栏
07-28 70
本文详细介绍了从应用部署到使用 React 构建社交笔记应用 Notedly 的 Web 客户端的全过程。内容涵盖使用 Heroku 部署应用并通过 GraphQL API 进行测试，React 的基础知识与组件化开发，以及通过 Apollo Client 与 GraphQL 服务器交互的方法。此外，还实现了用户认证、Markdown 笔记编辑、笔记创建与管理等功能，并探讨了未来扩展应用的方向。通过本文，开发者可以掌握前端开发中主流技术栈的整合应用，从而构建功能强大、用户体验良好的 Web 应用。
54、前端开发技术深度解析与实践指南
grpc6streamer的博客
08-09 38
本文是一篇前端开发技术的深度解析与实践指南，涵盖了模块加载器、模块打包器、异步编程、运行时类型安全、测试等核心技术，并对 Angular、Vue.js 和 React 这三大前端框架进行了详细解析和对比。文章还探讨了前端开发中的设计模式、性能优化策略以及未来发展趋势，帮助开发者全面掌握前端开发的核心知识和实践技巧。
React前端开发：React与GraphQL
kkchenjj的博客
07-20 1078
在React中，组件是构成用户界面的基本单元。组件可以是类或函数，它们接收props作为输入，并返回React元素描述UI。状态（state）是组件的局部数据，可以随时间改变，当状态改变时，组件会重新渲染。
Webpack与GraphQL集成：前端数据查询的构建优化
gitblog_00042的博客
09-18 695
在现代前端应用架构中，数据获取逻辑与UI渲染的耦合问题长期困扰开发者。传统REST API调用常导致**过度获取(Over-fetching)** 或**获取不足(Under-fetching)**，而GraphQL作为一种查询语言，通过允许客户端精确指定所需数据，理论上解决了这一矛盾。然而在实际生产环境中，我们发现： - 未优化的GraphQL查询可能导致**单一请求体积过大**，延长首屏加载...
前端开发神器：项目搭建全攻略
大雨的博客
07-08 1062
搭建前端项目脚手架在现代前端开发中具有举足轻重的地位，它是提升开发效率、保证项目质量和促进团队协作的关键环节。从常见的脚手架工具如 Create React App、Vue CLI、Angular CLI 等，到自定义脚手架的搭建，每一种方式都为开发者提供了便捷高效的项目初始化和开发流程。
react-slingshot 与 GraphQL 客户端对比：Apollo vs Relay
gitblog_00968的博客
10-21 521
你是否在构建 React 应用时，为数据获取逻辑感到困扰？传统 REST API 带来的过度获取、端点管理复杂等问题，是否让你难以专注于业务逻辑？本文将以 react-slingshot 框架为基础，对比当下最流行的两款 GraphQL 客户端——Apollo Client 和 Relay，帮助你快速选择适合项目的数据层解决方案。读完本文，你将了解两者的核心差异、适用场景及在 react-slin...
前端开发GraphQL实践：Grab/front-end-guide中的数据查询
gitblog_00922的博客
10-12 210
在现代前端开发中，数据查询是构建交互式应用的核心环节。传统RESTful API在处理复杂数据关系时往往需要多次请求，导致网络开销增大和用户体验下降。本文将结合Grab/front-end-guide项目中的最佳实践，介绍如何在前端应用中高效使用GraphQL进行数据查询，解决多端点请求、数据冗余等常见痛点。 ## 从REST到GraphQL：前端数据查询的演进 Grab/front-end-...
ApexCharts.js与Apollo Server集成：GraphQL后端方案
gitblog_00432的博客
10-12 254
你是否还在为前端图表展示与后端数据交互的繁琐流程而困扰？本文将带你一文解决ApexCharts.js与Apollo Server的集成难题，通过GraphQL实现高效的数据可视化方案。读完本文，你将掌握从搭建GraphQL后端到前端图表渲染的完整流程，轻松应对各类数据展示需求。 ## 方案概述 ApexCharts.js是一款功能强大的交互式JavaScript图表库，支持10多种图表类型，能...
通用React Apollo示例教程：构建GraphQL应用程序
开发者可以利用React构建组件化的前端界面，使用Apollo来处理GraphQL查询与数据流，通过Webpack进行模块打包和热重载优化开发体验。同时，React与ES6/ES2015的结合让代码更加现代化和高效，而SSR技术提高了Web应用的...
基于Vue.js与Apollo GraphQL的雪人应用开发
“雪人应用程式：VuejsApollo_GraphQl”是一个基于现代前端技术栈构建的Web应用程序项目，其核心围绕Vue.js、Apollo客户端和GraphQL技术展开，旨在实现高效、响应式的用户界面与后端数据服务之间的无缝集成。...
Apollo GraphQL社交应用开发详解：用户互动与后端交互
通过以上知识点，可以看出Apollo GraphQL React社交应用是一个综合运用了现代前端技术和后端服务架构的项目，它不仅涵盖了React、GraphQL和Apollo的使用，还涉及了前后端交互、用户认证授权、状态管理等多个方面的...
细胞的数据集 一万七张 粗糙粗糙
最新发布
12-05
细胞的数据集 一万七张 粗糙粗糙
六自由度机械臂ANN人工神经网络设计：正向逆向运动学求解、正向动力学控制、拉格朗日-欧拉法推导逆向动力学方程(Matlab代码实现)
12-05
六自由度机械臂ANN人工神经网络设计：正向逆向运动学求解、正向动力学控制、拉格朗日-欧拉法推导逆向动力学方程(Matlab代码实现)内容概要：本文档围绕六自由度机械臂的ANN人工神经网络设计展开，详细介绍了正向与逆向运动学求解、正向动力学控制以及基于拉格朗日-欧拉法推导逆向动力学方程的理论与Matlab代码实现过程。文档还涵盖了PINN物理信息神经网络在微分方程求解、主动噪声控制、天线分析、电动汽车调度、储能优化等多个工程与科研领域的应用案例，并提供了丰富的Matlab/Simulink仿真资源和技术支持方向，体现了其在多学科交叉仿真与优化中的综合性价值。; 适合人群：具备一定Matlab编程基础，从事机器人控制、自动化、智能制造、电力系统或相关工程领域研究的科研人员、研究生及工程师。; 使用场景及目标：①掌握六自由度机械臂的运动学与动力学建模方法；②学习人工神经网络在复杂非线性系统控制中的应用；③借助Matlab实现动力学方程推导与仿真验证；④拓展至路径规划、优化调度、信号处理等相关课题的研究与复现。; 阅读建议：建议按目录顺序系统学习，重点关注机械臂建模与神经网络控制部分的代码实现，结合提供的网盘资源进行实践操作，并参考文中列举的优化算法与仿真方法拓展自身研究思路。
特定版本tomcat-8.0.28.zip.7z
12-05
特定版本tomcat-8.0.28.zip.7z
Java设计模式全面解析与实战应用项目_涵盖创建型模式如构造者模式工厂模式原型模式与单例模式关系型模式如责任链模式命令模式迭代器模式观察者模式解释器模式中介者模式.zip
12-05
Java设计模式全面解析与实战应用项目_涵盖创建型模式如构造者模式工厂模式原型模式与单例模式关系型模式如责任链模式命令模式迭代器模式观察者模式解释器模式中介者模式.zip
2026年系统架构设计师(第一批次)综合知识考试题库及参考答案.pdf
12-05
2026年系统架构设计师(第一批次)综合知识考试题库及参考答案.pdf
面向制造业的鲁棒机器学习集成计算流程研究（Python代码实现）
12-05
面向制造业的鲁棒机器学习集成计算流程研究（Python代码实现）内容概要：本文围绕“面向制造业的鲁棒机器学习集成计算流程研究”展开，结合Python代码实现，提出了一套适用于制造场景的机器学习建模与计算框架。该框架强调模型在工业数据噪声、缺失与动态变化下的鲁棒性，集成了数据预处理、特征工程、模型训练、集成学习与结果验证等关键步骤，并通过实际代码示例展示了流程的可操作性与实用性。研究聚焦于提升制造过程中质量预测、故障诊断与工艺优化的自动化水平，推动智能制造的落地应用。; 适合人群：具备Python编程基础，熟悉机器学习基本算法，从事智能制造、工业数据分析或相关领域研究的研发人员与工程技术人员。; 使用场景及目标：①应用于制造业中的质量控制、设备预测性维护与生产流程优化；②构建稳定可靠的工业AI模型，应对实际生产中的不确定性与数据扰动；③为科研与工程实践提供可复用的机器学习集成计算模板。; 阅读建议：建议读者结合文中提供的Python代码进行实践操作，重点关注数据鲁棒性处理与模型集成策略的设计思路，并可根据具体制造场景调整参数与模块以适配实际需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值