开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Webpack不使用React或React Dom捆绑JS

Webpack是一个现代化的静态模块打包工具，它可以将多个模块打包成一个或多个文件，以便在浏览器中加载。它是前端开发中常用的工具之一，可以帮助开发者管理和优化项目的代码。

Webpack的主要特点包括：

模块化支持：Webpack支持将项目代码拆分成多个模块，通过模块化的方式进行开发，提高代码的可维护性和复用性。
打包优化：Webpack可以对项目中的代码进行优化和压缩，减小文件体积，提高加载速度。
资源加载：Webpack支持加载各种类型的资源文件，如JavaScript、CSS、图片等，可以通过配置加载器(loader)来处理不同类型的文件。
插件系统：Webpack提供了丰富的插件系统，可以通过插件来扩展其功能，如代码分割、缓存优化、自动化部署等。
开发环境支持：Webpack提供了开发环境下的热更新(Hot Module Replacement)功能，可以在代码修改后自动刷新页面，提高开发效率。

对于不使用React或React Dom的情况，Webpack仍然可以作为一个优秀的打包工具来使用。它可以处理各种类型的文件，并且可以通过配置加载器来处理不同类型的文件。例如，可以使用Babel加载器来处理ES6语法，使用CSS加载器来处理CSS文件，使用图片加载器来处理图片文件等。

对于非React项目，Webpack的应用场景包括但不限于：

前端项目打包：Webpack可以将前端项目中的各个模块打包成一个或多个文件，减少网络请求次数，提高页面加载速度。
代码优化：Webpack可以对项目中的代码进行优化和压缩，减小文件体积，提高页面加载速度。
资源加载：Webpack可以处理各种类型的资源文件，如JavaScript、CSS、图片等，可以通过配置加载器来处理不同类型的文件。
代码分割：Webpack可以将项目中的代码分割成多个文件，按需加载，提高页面的加载速度。
自动化部署：Webpack可以与其他工具或平台集成，实现自动化部署和发布。

对于腾讯云相关产品，推荐使用腾讯云的云开发(CloudBase)服务。云开发是腾讯云提供的一站式后端云服务，可以帮助开发者快速搭建和部署应用，提供云函数、数据库、存储等功能。腾讯云云开发官网链接地址为：https://cloud.tencent.com/product/tcb

总结：Webpack是一个现代化的静态模块打包工具，适用于前端开发中的模块化管理和打包优化。对于非React项目，Webpack仍然可以作为一个优秀的打包工具来使用，可以处理各种类型的文件，并且可以通过配置加载器来处理不同类型的文件。腾讯云的云开发服务是一个推荐的云计算产品，可以帮助开发者快速搭建和部署应用。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

webpack使用优化（react篇）

前言《React移动web极致优化》也提到了，构建工具是前端优化的重要一环。而React的推荐构建工具则是Webpack。...这篇文章我们就来聊聊如何在Webpack构建的过程中如何针对React的应用做一些优化。...如果还没看过《webpack使用优化（基本篇）》这篇文章，建议去看看，因为针对React的优化往往也离不开Webpack那些最基本的优化点。...具体在Webpack的loaders里可以这样写你的编译配置 { test: /\.js?...如果无法使用服务器构建，开发时请让小伙伴统一开发路径 webpack的bug导致如果本地开发目录路径不一致，编译出来的md5会不一致。所以推荐使用服务器构建。

1.5K6 0

聊一聊关于加快网站加载时间相关的 JS 优化技术

以下是一些广泛使用的捆绑工具： Webpack：Webpack 是一个功能强大且灵活的模块捆绑器，它不仅可以捆绑 JavaScript 文件，还可以处理样式表和图像等其他资产。...`; } // math.js export function calculate(x, y) { return x * y; } 使用 Webpack 或 Rollup 等捆绑工具，你可以将这些文件组合成一个捆绑文件...这对于不依赖于其他脚本或完全加载 DOM 的脚本很有用。 defer：defer 属性指示浏览器在不阻塞渲染的情况下下载脚本，但会延迟执行直到 DOM 被完全解析。...有几个工具可以帮助实现代码拆分，例如 Webpack 和 React.lazy： Webpack：这个流行的捆绑器提供对代码拆分的内置支持。...02)、JavaScript 代码示例：实现代码拆分下面是使用 Webpack 和 React 进行代码拆分的示例： // Importing the React and React.lazy libraries

2812 0

深入了解加快网站加载时间的 JavaScript 优化技术

以下是一些广泛使用的捆绑工具： Webpack：Webpack 是一个功能强大且灵活的模块捆绑器，它不仅可以捆绑 JavaScript 文件，还可以处理样式表和图像等其他资产。...`; } // math.js export function calculate(x, y) { return x * y; } 使用 Webpack 或 Rollup 等捆绑工具，你可以将这些文件组合成一个捆绑文件...这对于不依赖于其他脚本或完全加载 DOM 的脚本很有用。 defer：defer 属性指示浏览器在不阻塞渲染的情况下下载脚本，但会延迟执行直到 DOM 被完全解析。...有几个工具可以帮助实现代码拆分，例如 Webpack 和 React.lazy： Webpack：这个流行的捆绑器提供对代码拆分的内置支持。...02)、JavaScript 代码示例：实现代码拆分下面是使用 Webpack 和 React 进行代码拆分的示例： // Importing the React and React.lazy libraries

2183 0

React 18 如何提升应用性能

客户端的 React 渲染器理解这种格式，并使用它来高效地重构 React 组件树，而「无需发送 HTML 文件或 JavaScript 捆绑包」。...我们可以通过将 react-server-dom-webpack/server 的 renderToPipeableStream 方法与 react-dom/client 的 createRoot 方法结合使用来采用这种新的渲染模式...react-server-dom-webpack/server 的 renderToPipeableStream 方法用于「在服务器端将组件树序列化为可流式传输的格式」，然后将其发送给客户端。.../client'; import { createFromFetch } from 'react-server-dom-webpack/client'; export function Index()...这些组件「不应该使用任何客户端属性」，比如访问 window 对象，或使用像 useState 或 useEffect 这样的钩子。

2993 0

它改变了 JavaScript 的体系结构——Webpack 5 Module Federation

此外，在单独捆绑的应用程序之间共享实际的功能代码或组件是不可行的、无效的并且是无益的。对于那些想要更通俗版本的人，Jack Herrington 录了一个视频！...（双向主机）：当 bundle 或 Webpack 构建时可以作为主机或作为远程主机使用。.../src/App' }, shared: ["react", "react-dom","react-router-dom"] }), new HtmlWebpackPlugin...", "react-dom","react-router-dom"] }), new HtmlWebpackPlugin({ template: "....这样你可以使用相同的代码库和不同的 webpack 配置进行 SSR，以构建 node.js。对于 node.js 中的 Module Federation，相同的属性仍然适用：e.g.

2.1K2 0

前端基础:node.js、npm、webpack、React.js

http://localhost:8088 使用: webpack-dev-server --port 8088 --inline webpack-dev-server --contentbase -...4.4 Webpack 配置 webpack，一个前端资源加载/打包工具需要处理的文件类型 Html html-webpack-plugin 脚本 babel + babel-preset-react...声明式的框架数据驱动DOM，再用事件反馈给数据组件化开发组件组合而不是继承 state && props 生命周期理解JSX 一种JS扩展的表达式带有逻辑的标记语法，有别于HTML模板对样式...对DOM（可理解为 HTML）进行模拟比较操作前后的数据差异如果有数据差异，统一操作DOM 为何使用虚拟 dom ? 实现原理 ?...对于如下 js，由于引入了 react，肯定无法直接引入该 js 文件吧 ? 这时就需要 webpack 对这些文件打包。

2K1 0

基于webpack4+react 的js懒加载

以下介绍js懒加载的两种方式： webpack4方式 React.lazy方式 webpack4方式严格意义来说，这种方式是按需加载，只加载用到的js文件。...此处主要介绍使用动态导入（通过模块中的内联函数调用来分离代码）的懒加载。这种动态代码拆分的方式是webpack提供并推荐选择的方式。...如果在旧版本浏览器中使用 import()，记得使用一个 polyfill 库（例如 es6-promise 或 promise-polyfill），来 shim Promise。...以下是使用React Router 和 React.lazy 从路由拆分代码的示例： import { BrowserRouter as Router, Route, Switch } from 'react-router-dom...总结关于懒加载，除了以上两种方法之外，还可以使用插件的方式或者直接使用原生的 js 方式来实现。

4.2K2 0

使用webpack实现react的热更新

项目的打包主要通过 server.js 文件 webpack-dev-middleware webpack dev server 是一个开发服务器，內建 webpack 使用的 live reloading...这里的使用其实就是当做一个Express中间件来使用的，用于服务webpack的包。...true表示不监控源码修改状态，收到请求才执行webpack的build。false表示监控源码状态，配套使用的watchOptions可以设置与之相关的参数。...(ENTRY_PATH, 'index.js') ], vendor: ['react', 'react-dom', 'react-router-dom'] }, 插件部分添加上...: ['react', 'react-dom', 'react-router-dom'] }, 修改index.js文件 import {AppContainer} from 'react-hot-loader

2.9K2 0

SSR React同构渲染改造

基于React等框架的前端页面在不太复杂的前提下，可以使用同构渲染来实现同时具备服务端渲染和客户端渲染两者的优点，在调研了一下SSR相关方案之后，采用基于egg.js的同构方案来进行改造尝试，主要使用到的是...": "^16.0.0", "react-dom": "^16.0.0", "react-redux": "^5.0.6", "react-router...": "^4.2.0", "react-router-config": "^1.0.0-beta.4", "react-router-dom": "^4.2.2...` import React from 'react'; import ReactDom from 'react-dom'; import { AppContainer...、webpack常用解决方案（作为参考，选用）自动构建HTML，可压缩空格，可给引用的js加版本号或随机数：html-webpack-plugin 处理CSS：css-loader与style-loader

3401 0

「React TS3 专题」从创建第一个 React TypeScript3 项目开始

.0，笔者的react版本为16.9.0，如果低于16.7.0-alpha.0，你可以使用以下命令进行安装： npm install react@16.7.0-alpha.0 npm install react-dom...和 console，并且允许imports的导入和对象key的声明可以不按照字母的顺序进行排序。...@types/react @types/react-dom --save-dev 7、在dist目录下创建index.html文件 <!...9 、添加 webpack 接下来我们使用 webpack 打包我们的项目，webpack 是什么我就不介绍了，不明白的去 webpack官网看介绍（https://webpack.js.org/）。...配置对象 mode：设置 webpack 当前为开发环境模式还是生产模式 entry：设置 webpack 从哪里开始寻找要捆绑的模块，在我们的项目中入口文件是 index.tsx module：设置

2.2K1 0

使用 React JS 和 Tailwind CSS 进行 React Tilt

React Tilt是一个很酷的工具，它为我们的网站元素添加了运动和动画效果。通过给元素添加浮动和倾斜效果，使页面看起来更有趣。React Tilt易于使用，为我们的应用程序带来一丝魔法的触感。...入门步骤首先，使用Vite创建一个新的React应用，并添加Tailwind CSS。...Axis（轴）：定义哪个轴（X或Y）应该在倾斜时禁用。Reset（重置）：确定是否在退出时重置倾斜效果或保持不变。Easing（缓动）：指定进入/退出转场的缓动函数，影响动画的平滑度。...Tilt选项在card.jsx文件中，为卡片组件定义一些选项，以便与React Tilt一起使用。在本教程中，我们将使用默认选项，但请随意查看自定义选项或根据需要创建新选项。...应用中使用React Tilt为元素添加动感和动画效果，让我们的页面更有趣。

1430 0

H5 基础脚手架：极速构建项目

`，`static`或`disabled`。...analyzerPort: 8888, // 路径捆绑，将在`static`模式下生成的报告文件。 // 相对于捆绑输出目录。...// 在这里查看更多选项：https：//github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21 statsOptions: null...的 splitChunks 分割代码，上述一个是提取公共模块引用，一个是提取第三方模块引用这玩意拆分要看自己的需求，不过对构建速度提升不多，对项目使用优化有需求的可以试试 CDN 配置（推荐 & 不建议...: 'window.React', 'react-dom': 'window.ReactDOM', } ?

8713 0

【React】归纳篇（二）JSX使用与虚拟DOM

/16.4.0/umd/react.development.js"> <script src="https://cdn.bootcss.com/babel-standalone/6.26.0...const myId = 'test'; //**流程不变** //1、创建虚拟<em>DOM</em>-不<em>使用</em>jsx的情况 const vDom1 = <em>React</em>.createElement...(virtualDOM,containerDOM); 建立虚拟<em>DOM</em>——2种方式 //第一种（<em>不</em>推荐） const vDom = <em>React</em>.createElement('h1',{id:myId},msg.../16.4.0/umd/<em>react</em>.development.<em>js</em>"> <script src="https://cdn.bootcss.com/<em>react</em>-<em>dom</em>/16.4.0

1653 0

使用React、Electron、Dva、Webpack、Node.js、Websocket快速构建跨平台应用

-----京东的Taro框架这些人已经把Node.js和webpack用上了天对webpack不熟悉的，看我之前的文章，今天不把重点放在webpack 欢迎关注我的专栏《前端进阶》都是百星高赞文章...Electron相当于给React生成的单页面应用套了一层壳，如果涉及到文件操作这类的复杂功能，那么就要依靠Electron的主进程，因为主进程可以直接调用Node.js的API,还可以使用C++插件，...谈谈技术选型使用React去做底层的UI绘制，大项目首选React+TS 状态管理的最佳实践肯定不是Redux，目前首选dva，或者redux-saga。...构建工具选择webpack，如果不会webpack真的很吃亏，会严重限制你的前端发展，所以建议好好学习Node.js和webpack 选择了普通的Restful架构，而不是GraphQL，可能我对GraphQL.../config/webpack.dev.js", 将代码打包到内存中使用 "start": "electron ."

3K3 0

React + webpack 开发单页面应用简明中文文档教程（四）调整项目文件以及项目配置

在 jsx 和 scss 中使用图片 React + webpack 开发单页面应用简明中文文档教程（十一）将项目打包到子目录运行 ---- 在上一篇博文中，我们很好的认识了项目的各个文件的所用，并且进行了一些调整...编辑调整项目 src 文件配置 index.js 文件原文内容如下： import React from 'react'; import ReactDOM from 'react-dom'; import...from 'react' import ReactDOM from 'react-dom' import '....webpack.config.dev.js 是用于开发环境的配置文件，而 webpack.config.prod.js 是用于生产环境的配置。...安装缺少组件我们在路由文件中使用了 react-router-dom 这个包，我们需要安装一下 npm i react-router-dom 我们使用了 sass 所以需要安装 node-sass 和

6564 0

从零学脚手架(五)---react、browserslist

快速应用框架（或语言）只不过是应用工具而已。 ? 以前都说是“三大框架”，还有一个Google开发的Angular，但是国内Angular使用份额越来越少。...有兴趣的朋友可以看一下这篇文章：深度剖析：如何实现一个 Virtual DOM 算法 JSX React是通过JS构建元素的，我们都知道使用JS编写页面痛苦是没有结构性。...使用HTML两个标签能搞定的事，使用JS就能写一大堆代码。 React为了解决这个问题，提供了一个模板语言---JSX JSX是一种JS扩展语言。允许在JS中以标签形式构建元素。... ); ReactDOM.render(root, document.getElementById('root')); 在 /src/index.js 文件中使用了JSX创建元素，然后使用 react-dom...React是一个快速构建高性能网站的开发框架 React使用了虚拟DOM（Virtual DOM）和diff 算法优化了DOM操作 React利用自定义DOM类型解耦平台限制，以此实现了跨平台

1.4K2 0

你可能不知道的9条Webpack优化策略

已不再维护，这里不推荐使用 ❞ uglifyjs-webpack-plugin 安装 yarn add -D uglifyjs-webpack-plugin 示例 const UglifyJsPlugin...vendors: ['lodash', 'jquery'], react: ['react', 'react-dom'] }, output: { filename: '[name...、react-dom等） webpack.config.js(对应我这里就是webpack.base.js) const path = require("path"); const fs = require...react'），此选项将决定在 package.json 中使用哪个字段导入模块。.../node_modules/react/umd/react.production.min.js') }, //直接指定react搜索模块，不设置默认会一层层的搜寻 modules: [path.resolve

1.6K3 0

Webpack 踩坑记 - 配置 externals 和 output

如果不设置 library, 那这个library就不暴露。...我们一般容易混淆的是 externals 的使用，比如对 react-dom 的 externals，经常会看到两种写法： {'react-dom': 'reactDom'} {'react-dom':...：官方文档 webpack externals 深入理解：偏向总结深入浅出webpack之externals的使用：以打包之后的源码拆解开来讲解 2.2、mainFields 参考资料先通读一下官方文档中的...browser 字段 3、解决方案使用两份输出配置项，主要更改 webpack 的打包的配置项中的 externals 、output 这两个字段。...文件的（别人使用的时候直接放在 dependencies中，也会最终打包进去） { externals: { 'react': 'react', // 这里更改了 'react-dom

3.4K2 0

webpack4 中的 React 全家桶配置指南，实战！

3.创建index mkdir index cd index & touch index.js & touch index.html index.js import ReactDom from 'react-dom...我们之前使用的babel，babel-loader 默认只转换新的 JavaScript 语法，而不转换新的 API。...react-dom'; import React from 'react'; import Main from '....}; 使用webpack-dev-server webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack...结合redux使用更加强大，同时支持web，native更多参考这里 1.安装react-router-dom npm install react-router-dom --save 2.如果项目中用了

1.8K2 0

微前端架构实战

多团队协作容易不规范。包含通用模块的npm包作为共享资产，“每个人”拥有它，但在实践中，这通常意味着没有人拥有它。它很快就会充满杂乱的风格不一致的代码，没有明确的约定或技术愿景。...": "https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js", "react-router-dom..."react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.1/umd/react-dom.production.min.js" }..."react-router-dom": "https://cdn.jsdelivr.net/npm/react-router-dom@5.2.0/umd/react-router-dom.min.js"..."react-router-dom": "https://cdn.jsdelivr.net/npm/react-router-dom@5.2.0/umd/react-router-dom.min.js"

3.8K0 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭