开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何用webpack在ReactJS中编译加载纯CSS？

在ReactJS中使用Webpack编译加载纯CSS可以通过以下步骤实现：

首先，确保已经安装了Node.js和npm（Node包管理器）。
在项目的根目录下，使用npm初始化一个新的项目：npm init -y
安装React和Webpack相关的依赖：npm install react react-dom webpack webpack-cli style-loader css-loader --save-dev
在项目根目录下创建一个名为webpack.config.js的文件，并添加以下配置：const path = require('path');

module.exports = {

 entry: './src/index.js',

 output: {

   path: path.resolve(__dirname, 'dist'),

   filename: 'bundle.js',

},

 module: {

   rules: [

       test: /\.css$/,

       use: ['style-loader', 'css-loader'],

},

],

},

};

在项目根目录下创建一个名为src的文件夹，并在其中创建一个名为index.js的文件，作为React应用的入口文件。
在src文件夹中创建一个名为App.js的文件，并编写React组件的代码，例如：import React from 'react'; import './App.css';

const App = () => {

 return <div className="app">Hello, React!</div>;

};

export default App;

在src文件夹中创建一个名为App.css的文件，并编写CSS样式，例如：.app { color: red; }
在index.js文件中引入React和ReactDOM，并渲染App组件到页面上：import React from 'react'; import ReactDOM from 'react-dom'; import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

在项目根目录下执行以下命令，使用Webpack进行编译：npx webpack
编译完成后，在项目根目录下会生成一个名为dist的文件夹，其中包含编译后的文件。
在HTML文件中引入编译后的文件：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>React App</title> </head> <body> <div id="root"></div> <script src="dist/bundle.js"></script> </body> </html>
运行HTML文件，即可在浏览器中看到渲染后的React应用，并应用了CSS样式。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云内容分发网络（CDN）等。你可以在腾讯云官网上找到这些产品的详细介绍和文档。

参考链接：

Webpack官方文档：https://webpack.js.org/
React官方文档：https://reactjs.org/
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn

相关搜索:在webpack工程中CSS不能立即加载在reactJS应用程序中基于条件动态加载.css 在webpack react应用程序中包含css/style加载器当我在webpack配置中添加css加载器时，tinymce突然停止工作谷歌字体不适用于SCSS -字体家族编译在main.css文件中，但不包括在网站加载时 c语言遍历hash表 c语言做登录界面代码 c语言数据结构列队 c语言树的层数非递归 c语言大数的运算减法

相关搜索:

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

有帮助

没帮助

相关·内容

指尖前端重构（React）技术分析报告

React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。

03

基于React.js实现webapp的技术实践

由于最近的reactjs实在太火，而且距离第一版已经快2年的时间了，已经相对稳定和成熟了，基于这两个前提下，团队对reactjs及其他开源技术进行了相关调研，发现落地是可行的，我们有4名前端同学，从调

08

React 新的文档用到了哪些技术？

https://beta.reactjs.org React 的新的文档已经完成了 70 % 并且呼吁社区进行翻译工作。

01

reactjs

最近在学习react js，ReactJS是Facebook开发的用于构建用户界面的JAVASCRIPT库，利用其可以实现组件式开发。

00

理论｜webpack2 终极优化

webpack是当下最流行的js打包工具，这得益于网页应用日益复杂和js模块化的流行。webpack2增加了一些新特性也到了预发布阶段，是时候告诉大家如何用webpack2优化你的构建让它构建出更小的

01

ReactJS 学习——入门

React 首次被提出是在2014年的 F8 大会上，当期的主题为 “Rethinking Web App Development at Facebook”，这也是 React 名字的由来。

04

这些node开源工具你值得拥有(下)

通过阅读 awesome-nodejs 库的收录，我抽取其中一些应用场景比较多的分类，通过分类涉及的应用场景跟大家分享工具

03

前端工程化 - Webpack 常见面试题速查

它们会自动执行指定的任务，就像流水线，把资源放上去然后通过不同插件进行加工，有活跃的社区，丰富的插件，能方便地打造各种工作流。

04

【前端面试题】08—31道有关前端工程化的面试题(附答案)

随着前端技术的发展，前端工程化变得越来越重要。前端工程化部分的面试题主要考察应试者对工程化的理解与运用，如何通过工程化来提高代码质量、编译代码、优化代码；如何提高网站性能，保障网站安全，提升用户体验；如何将开发的代码按照理想的方式发布和上线等。

03

React+Redux仿Web追书神器

引言由于 10 月份做的 React Native 项目没有使用到 Redux 等库，写了一段时间想深入学习 React，有个想法想做个 demo 练手下，那时候其实还没想好要做哪一个类型的，也看

08

Webpack打包构建太慢了？试试几个方法

webpack支持监听模式，此时需要重新编译时就可以进行增量构建，增量构建是很快的，基本不到一秒或几秒之内就能重新编译好

02

翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

摘要总结：本文介绍了一种用于Web应用程序的基于关键CSS和Webpack的代码拆分和优化方法。该方法通过将关键CSS与Webpack生成的非关键CSS进行拆分，在提高页面加载速度的同时，保留对关键CSS的访问权限，适用于对性能要求较高的Web应用程序，同时具有较好的可维护性。

08

前端ReactJS技术介绍

WEB应用程序基本架构胖服务端 fat_server.png 这个架构的特点：后台良好的分层模型页面由后台输出至浏览器，一般采用JSP、PHP等动态页面技术处理页面的动态内容一些改进：引入A

04

借助Babel 7和Webpack构建React Toolchain

React不是完全开箱即用的。它使用了一些最近node才支持的关键字和语法（在本教程中我使用了v 9.3.0版本）。因此需要一些很麻烦的设置，但是Facebook为此提供了一个可以轻松创建React应用的方案。这听起来不错，那我为什么要说这一点呢？

04

在create-react-app中使用sass

不管你是刚使用Reactjs或者是Reactjs的老司机，你们一定都听说过create-react-app这个脚手架，而从create-react-app的官方文档中，我们可以看到他们暂时还不支持直接导入LESS或者Sass。但是通过一些配置，我们还是可以从官方脚手架中使用sass/scss/less的。

02

webpack2 终极优化

webpack是当下最流行的js打包工具，这得益于网页应用日益复杂和js模块化的流行。webpack2增加了一些新特性也到了预发布阶段，是时候告诉大家如何用webpack2优化你的构建让它构建出更

02

「React 手册」从创建第一个 React 组件开始学起

大家好，在本系列的前三篇文章里，我们一起学习了在 React 中经常会用到的 ES6 新特性，以及 REACT 16+ 版本的一些新特性和团队成员在 Winwow 和 MAC 环境下混合开发时需要注意的一些问题，从本篇文章起，我们将正式开始从最基础的内容开始学习React，今天我们将从创建第一个 React 组件开始学起。

02

「React 基础」从创建第一个React组件开始学起

大家好，在本系列的前三篇文章里，我们一起学习了在 React 中经常会用到的 ES6 新特性，以及 REACT 16+ 版本的一些新特性和团队成员在 Winwow 和 MAC 环境下混合开发时需要注意的一些问题，从本篇文章起，我们将正式开始从最基础的内容开始学习React，今天我们将从创建第一个 React 组件开始学起。

01

webpack2 终极优化

webpack是当下最流行的js打包工具，这得益于网页应用日益复杂和js模块化的流行。webpack2增加了一些新特性也正式发布了一段时间，是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。

02

webpack教程：如何从头开始设置 webpack 5

最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。

01

webpack2 终极优化

webpack是当下最流行的js打包工具，这得益于网页应用日益复杂和js模块化的流行。webpack2增加了一些新特性也正式发布了一段时间，是时候告诉大家如何用webpack2优化你的构建让它构建出更

9102年：手写一个React脚手架【优化极致版】

在上面的示例中，我们通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。可能你想要了解在代码最上面导入的 path 模块是什么，它是一个 Node.js 核心模块，用于操作文件路径。

01

40道ReactJS 面试问题及答案

英文 | https://blog.stackademic.com/top-40-reactjs-interview-questions-and-answers-for-2024-70c94e5fccca

01

Reactjs+BootStrap开发自制编程语言Monkey的编译器:创建简易的页面IDE

为了尽快上手React,我们先通过一个实际例子，增加你的感性认识。我们将使用React先构建一个简单的Monkey代码编译器，没有感性认识的知识讲解都是bullshit,就像你没摸过水就跟你讲解游泳理论一样。即使你对Reactjs的运用一无所知，通过亲手把代码敲一遍，并看到实践的效果，你内心也自动会对Reactjs有了较为深刻的认知。首先你需要自行安装好node.js，React本身并不需要Node.js,但开发中需要的很多工具和模块需要Node.js的支持，特别是我们需要NodeJS的npm 模块安装工

02

现代 JavaScript 库打包指南

大家好，我是 ConardLi。今天给大家分享一篇 JS 库打包的参考指南，如果你也在维护一些 JS 库，可以参考一下～

02

五年 Web 开发者 star 的 github 整理说明

05

如何规范地发布一个现代化的 NPM 包？

今天给大家分享一篇 JS 库打包的参考指南，如果你也在维护一些 JS 库，可以参考一下～

02

从0到1搭建webpack2+vue2自定义模板详细教程

webpack2和vue2已经不是新鲜东西了，满大街的文章在讲解webpack和vue，但是很多内容写的不是很详细，对于很多个性化配置还是需要自己过一遍文档。Vue官方提供了多个vue-templates，基于vue-cli用的最多，不过对于很多人来说，vue-cli 的配置还是过于复杂，对于我们了解细节实现不是很好，所以想自己从零开始搭建一个模板工程，也顺便重新认识一下webpack和vue工程化。

02

先行者计划--1109微课总结 | 《通过二个demo初识webPack》

webpack，到底是什么呢？ Webpack将所有静态资源都认为是模块，比如JavaScript，CSS，LESS，图片,...,从而可以对其进行统一管理。为此Webpack引入了加载器的概念，除了纯JavaScript之外，每一种资源都可以通过对应的加载器处理成模块。 WebPack可以看做是模块的打包机器：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript，jsx,vuex等），并将其转换和打包为合适的格式供浏览

07

【Hybrid开发高级系列】WebPack模块化专题

如今，越来越多的JavaScript代码被使用在页面上，我们添加很多的内容在浏览器里。如何去很好的组织这些代码，成为了一个必须要解决的难题。

05

ReactJS和React-Native的主要区别在哪里

React-Native已经存在了约2年，而且因为它能被Android使用让我们构建跨平台的移动app而成为真正有趣的框架。一些开发者还为构建适用于Mac和Windows的桌面应用程序量身打造了一些框架，这简直太酷了。

03

一文带你进入微前端世界

微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。微前端（micro-frontends）术语在 2016 年在 TECHNOLOGY RADAR[1] 中被提及。

01

Vue的安装及使用快速入门

1、下载地址为：https://nodejs.org/en/ 　　2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功

02

走近webpack（4）--css相关拓展

我们前面已经学了很多webpack基本的处理情况，一句话总结就是，一个优秀的webpack项目，主要的核心用法就是整合loader和plugin去处理你想要的任何需求。　　下面，咱们一起来学学如何用webpack来处理less，sass等预编译器。先看看如何用webpack处理less。　　国际惯例，第一步是安装： npm install less less-loader --save-dev 　　第二步，配置loader项: { test: /\.less$/, use: [{

npm、npm scripts

1、如何全局安装一个 node 应用? npm install -g <package_name> 上述命令执行之后将会在当前的目录下创建一个 node_modules 的目录（如果不存在的话），然

04

现代 JavaScript 库打包指南

本指南旨在提供一些大多数库都应该遵循的一目了然的建议。以及一些额外的信息，用来帮助你了解这些建议被提出的原因，或帮助你判断是否不需要遵循某些建议。这个指南仅适用于库（libraries），不适用于应用（app）。

01

图解串一串 webpack 的历史和核心功能

其实之前都不打包的，就是 js、css 分别用对应的工具编译下，然后在 html 里引入。

02

2021年React学习路线图

2018 年我们写过一次 React 学习路线图（https://www.infoq.cn/article/AEkiVAiJf25LZmoUe_yc），两年过去了，又有哪些变化呢？

02

番外篇：入门React

原生js代码乱七八糟的时候，那就来体验一下React。 Tip:内容有点乱，秘籍在最后

03

现代 JavaScript 库打包指南

大家好，我是 winty。今天给大家分享一篇 JS 库打包的参考指南，如果你也在维护一些 JS 库，可以参考一下～

03

走近webpack（4）–css相关拓展

我们前面已经学了很多webpack基本的处理情况，一句话总结就是，一个优秀的webpack项目，主要的核心用法就是整合loader和plugin去处理你想要的任何需求。

01

Vue 脚手架项目分析

babel-preset-env是一个新的预设，可以让你指定一个环境并自动使能需要的插件。支持拥有超过1%市场份额的浏览器

04

127. 精读《React Conf 2019 - Day1》

React Conf 2019 在今年 10 月份举办，内容质量还是一如既往的高，如果想进一步学习前端或者 React，这个大会一定不能错过。

02

React全栈：Redux+Flux+webpack+Babel整合开发

1.const、let关键字：let块级作用域，const常量（如果是引用类型，那么可以修改它的属性）

02

webpack基础探讨

本文作者：IMWeb zixinfeng 原文出处：IMWeb社区未经同意，禁止转载 1. 使用webpack webpack命令使用 webpack --help (webpack -h) 查看所有的命令 webpack-v 打包命令 webpack [] 不适用webpack配置文件的时候使用webpack配置文件, 直接webpack --config 指定配置文件 (默认配置文件名称 webpack.config.js或者 webpackfile.js) Basic Opt

01

webpack面试题

webpack打包原理 1、把一切都视为模块：不管是 CSS、JS、Image 还是 HTML 都可以互相引用，通过定义 entry.js，对所有依赖的文件进行跟踪，将各个模块通过 loader 和 plugins 处理，然后打包在一起。 2、按需加载：打包过程中 Webpack 通过 Code Splitting 功能将文件分为多个 chunks，还可以将重复的部分单独提取出来作为 commonChunk，从而实现按需加载。把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载 3、webpack.config.js的配置

03

web前端学习/工作笔记（十）

react16.production.js:14 Uncaught (in promise) Invariant Violation: Minified React error #85; visit

02

爆肝总结万字长文笔记webpack5打包资源优化

webpack是如何打包资源优化，你有了解吗？或者一个经常被问的面试题，首屏加载如何优化，其实无非就是从http请求、文件资源、图片加载、路由懒加载、预请求，缓存这些方向来优化，通常在使用脚手架中，成熟的脚手架已经给你做了最大的优化，比如压缩资源，代码的tree shaking等。

02

Webpack Loader

Webpack不认识CSS（无法直接处理），就需要先由Loader加工一遍（预处理）

03

Webpack配置实战

本篇将从实践出发，搭建一个基础的支持模块化开发的项目，在第二章节《进阶配置》中使用 webpack 搭建一个 SASS + TS + React 的项目。

04

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭