广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >React+Webpack怎么用
  • 331

0
分享到

React+Webpack怎么用

2024-04-02 19:04:59 331人浏览 安东尼
摘要

这篇文章主要为大家展示了“React+webpack怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“React+WEBpack怎么用”这篇文章吧。webst

这篇文章主要为大家展示了“React+webpack怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“React+WEBpack怎么用”这篇文章吧。

webstorm+react+webpack

强烈推荐使用webstORM！。（当然你完全可以使用诸如atom，Sublime之类的编辑器，但之所以选择webstorm是因为它默认支持对react jsX 的语法高亮以及可以手动开启Emmet对jsx的支持，棒棒哒~）

首先请这么组织你的项目结构：

--your project
 |--app
 |--components
  |--productBox.jsx
 |--main.js
 |--build
 |--index.html
 |--bundle.js(该文件是webpack打包后生成的)

用npm安装react、webpack

默认已经安装了nodejs，并输入：npm init根据提示输入内容并创建package.JSON文件

然后依次输入：

npm install react --save-dev
npm install webpack --save-dev

安装最新版本的React与Webpack并将它们保存至package.json内的开发依赖项目中。

创建webpack.config.js配置文件

新建一个名为webpack.config.js的文件，它应该长这个样：

var path = require('path');

module.exports = {
 entry: path.resolve(__dirname, './app/main.js'),
 output: {
 path: path.resolve(__dirname, './build'),
 filename: 'bundle.js',
 }
};

其中entry指定了webpack的入口程序，好比c++和java中的main程序一样，我们把最终要插入到页面指定位置的react模板写入main.js中：

app/main.js

var React = require('react');
var AppComponent = require('./components/productBox.js');
React.render(<AppComponent />, document.getElementById('content'));

以及引入的自定义react组件：

app/components/productBox.js

var React = require('react');
var ProductBox = React.createClass({
 render: function () {
 return (
  <div className="productBox">
  Hello World!
  </div>
 );
 }
});

module.exports = ProductBox;

而output则指定了webpack打包成功之后文件名称以及文件的存放位置。

依照之前指定的项目结构，我们可以在index.html中直接引入打包生成的bundle.js，像这样：

build/index.html

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>React Test</title>
</head>
<body>
 <div id="content"></div>
 <script src="bundle.js"></script>
</body>
</html>

安装并启用webpack-dev-server

webpack-dev-server允许我们可以把本地项目跑在像Nginx那样的web服务器上，更重要的是我们可以在package.json文件内定义scripts，同时修改webpack的配置文件来达到类似BrowserSync（即文件修改能被监听，并自动刷新浏览器）的效果！

我们先打开package.json，并找到scripts代码块。在没引入webpack-dev-server之前，我们运行这个项目的姿势是这样的：
修改scripts为

"scripts": {
 "build": "webpack"
}

并且执行：

npm run build

项目就跑起来啦，但是每次修改程序我们都要手动输入npm run build来跑项目，这无疑是一件非常蛋疼的事情。但有了webpack-dev-server光环，我们的姿势应该是这样的：

为scripts添加

"scripts": {
 "build": "webpack",
 "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
}

ps：dev里各属性值的意思是：

  1. webpack-dev-server: 在 localhost:8080 建立一个 Web 服务器

  2. --devtool eval:为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号

  3. --progress: 显示合并代码进度

  4. --colors: 在命令行中显示颜色

  5. --content-base build:指向设置的输出目录

并且在index.html里加入：

build/index.html

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>React Test</title>
</head>
<body>
 <div id="content"></div>
 <script src="Http://localhost:8080/webpack-dev-server.js"></script>
 <script src="bundle.js"></script>
</body>
</html>

在webpack.config.js的入口处加入：

var path = require('path');

module.exports = {
 entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
 output: {
 path: path.resolve(__dirname, './build'),
 filename: 'bundle.js',
 }
};

以便在进行改动时浏览器可以自动刷新。

最后执行：

npm run dev

你只要在浏览器打开这个地址：http://localhost:8080，webpack-dev-server会为你准备好一切，你只要敲一敲键盘，save一下，所见即所得。

Webpack Loader

讲到这里，我们基本上就可以迅速搭建一个简单的web项目，但不得不提的是webpack loader。它是我个人认为相比于其他模块加载更牛X的地方，将它用于react的开发，结合react与生俱来的优越性能，两者天衣无缝的配合简直就是黄金组合。

总的来说webpack loader可以实现：

  1. 可以将React JSX语法转为js语句

  2. React开发中支持es6语法

  3. 支持通过import来直接引入CSS、less、sass甚至是图片

  4. 支持css中引用的图片大小在某一大小范围之内直接转为BASE64格式

。。。。。等等等

为了能够让以上功能奏效，我们要先安装对应的：

babel-loader

npm install babel-loader --save-dev

css-loader

npm install css-loader --save-dev

less-loader

npm install less-loader --save-dev

style-loader

npm install style-loader --save-dev

url-loader

npm install url-loader --save-dev

而具体的实现，我们只要在webpack的配置文件中加入module属性里的loaders：

var path = require('path');

module.exports = {
 entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
 output: {
 path: path.resolve(__dirname, './build'),
 filename: 'bundle.js',
 },
 module: {
 loaders: [{
  test: /\.jsx?$/,
  loader: 'babel'
 }, {
  test: /\.css$/,
  loader: 'style!css'
 }, {
  test: /\.less$/,
  loader: 'style!css!less'
 },{ 
  test: /\.(png|jpg)$/, 
  loader: 'url?limit=25000' 
 }]
 }
};

通过指定文件后缀来执行对应的loader操作，我们甚至可以轻松的引入其他类型的文件，最后所有被引入进来的文件都会统统打包到bundle.js中去！

开发环境下的优化

在开发React组件的代码中，在webpack的帮助下我们都是通过require(‘react')的方式引入ReactJS，默认的require()方法会在webpack打包的时候去遍历ReactJS及其依赖。试想下，如果我们还引入了其他的库，例如Jquery、react-router、moment等，require都会以同样的方式去遍历，这会大大增加打包的时间。这显然会影响到开发的效率。

为了能够尽可能的加速打包过程，我们应该重写它的行为，鼓励在开发中使用依赖的压缩版本

假如我们只引入了react，我们可以这样修改webpack.config.js:

var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

var config = {
 entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
 resolve: {
 alias: {
  'react': pathToReact
 }
 },
 output: {
 path: path.resolve(__dirname, './build'),
 filename: 'bundle.js'
 },
 module: {
 noParse: [pathToReact],
 loaders: [{
  test: /\.jsx?$/,
  loader: 'babel'
 }, {
  test: /\.css$/,
  loader: 'style!css'
 }, {
  test: /\.less$/,
  loader: 'style!css!less'
 },{ 
  test: /\.(png|jpg)$/, 
  loader: 'url?limit=25000' 
 }]
 }
};

module.exports = config;

resolve属性里的alias用来告诉webpack，当引入react时，试图去匹配压缩过的react；

而module中的noParse则是告诉当webpack尝试去解析压缩文件时，这种行为是不允许的。

当然啦，细心的你可能会发现当引入更多的库时，这样写多少会显得有点冗余，为此下面有个更加优雅的写法：

var path = require('path');
var node_modules_dir = path.join(__dirname, 'node_modules');
var deps = [ 
 'react/dist/react.min.js',
 'react-router/dist/react-router.min.js',
 'moment/min/moment.min.js'
];
var config = {
 entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
 resolve: {
 alias: {}
 },
 output: {
 path: path.resolve(__dirname, './build'),
 filename: 'bundle.js'
 },
 module: {
 noParse: [],
 loaders: [{
  test: /\.jsx?$/,
  loader: 'babel'
 }, {
  test: /\.css$/,
  loader: 'style!css'
 }, {
  test: /\.less$/,
  loader: 'style!css!less'
 },{ 
  test: /\.(png|jpg)$/, 
  loader: 'url?limit=25000' 
 }]
 }
};

deps.forEach(function (dep) {
 var depPath = path.resolve(node_modules_dir, dep);
 config.resolve.alias[dep.split(path.sep)[0]] = depPath;
 config.module.noParse.push(depPath);
});

module.exports = config;

瞬间biger起来了，待加以修饰之后，让我们更加便捷高效的享受React与Webpack带来的乐趣吧。

以上是“React+Webpack怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网VUE频道！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: React+Webpack怎么用

本文链接: https://www.lsjlt.com/news/79541.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • React+Webpack怎么用
    这篇文章主要为大家展示了“React+Webpack怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“React+Webpack怎么用”这篇文章吧。webst...
    99+
    2022-10-19
  • react项目之webpack-dev-serve有什么用
    这篇文章主要介绍了react项目之webpack-dev-serve有什么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。模块热替换(Hot...
    99+
    2022-10-19
  • webpack怎么用
    这篇文章主要介绍了webpack怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 webpack是基于node的。先安装最新的...
    99+
    2022-10-19
  • 利用yarn实现一个webpack+react种子
    一、初始化项目 首先确保你的node 版本 >=4.0.并且确保yarn可以正常工作，关于安装yarn，你可以看这里 我们先创建个空文件夹 比如yarn-react-webpack-seed,然后输...
    99+
    2022-06-04
    种子 yarn webpack
  • webpack如何构建react多页面应用
    这篇文章给大家分享的是有关webpack如何构建react多页面应用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。利用creat-react-app 新建一个react应用npm...
    99+
    2022-10-19
  • webpack中CommonsChunkPlugin怎么用
    小编给大家分享一下webpack中CommonsChunkPlugin怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1.d...
    99+
    2022-10-19
  • html-webpack-plugin怎么用
    这篇文章将为大家详细讲解有关html-webpack-plugin怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。html-webpack-plugin 可能用过的 ...
    99+
    2022-10-19
  • extract-text-webpack-plugin怎么用
    这篇文章主要介绍了extract-text-webpack-plugin怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。extract-...
    99+
    2022-10-19
  • 如何实现基于react+webpack的多页面应用
    这篇文章给大家分享的是有关如何实现基于react+webpack的多页面应用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。项目目录介绍：打包后文件目录：打包成cli如果你厌烦了新...
    99+
    2022-10-19
  • 怎么掌握webpack
    本篇内容介绍了“怎么掌握webpack”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！什么是webpack？...
    99+
    2022-10-19
  • Webpack loader之file-loader怎么用
    这篇文章主要为大家展示了“Webpack loader之file-loader怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Webpack loader之...
    99+
    2022-10-19
  • webpack中DLLPlugin和DLLReferencePlugin怎么用
    这篇文章主要为大家展示了“webpack中DLLPlugin和DLLReferencePlugin怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“webpa...
    99+
    2022-10-19
  • 使用webpack配置react-hot-loader热加载局部更新
    目录webpack配置react-hot-loader热加载局部更新步骤1步骤2步骤3步骤4步骤5步骤6react-hot-loader热加载不生效的可能问题总结webpack配置r...
    99+
    2023-01-16
    webpack配置react-hot-loader webpack配置react react-hot-loader热加载局部更新
  • React Native react-navigation导航怎么用
    这篇文章将为大家详细讲解有关React Native react-navigation导航怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。一、开源库介绍Fb推荐使用库...
    99+
    2022-10-19
  • 怎么理解Webpack HMR
    本篇内容主要讲解“怎么理解Webpack HMR”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么理解Webpack HMR”吧!一、HMR 介绍Hot Mod...
    99+
    2022-10-19
  • webpack怎么打包CSS
    这篇“webpack怎么打包CSS”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“webpa...
    99+
    2022-10-19
  • 怎么开发Webpack Loader
    本篇内容主要讲解“怎么开发Webpack Loader”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么开发Webpack Loader”吧!一、单一任务loaders可以被链式调用，为每一步创...
    99+
    2023-06-04
  • React Router怎么用
    这篇文章主要为大家展示了“React Router怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“React Router怎么用”这篇文章吧。React R...
    99+
    2022-10-19
  • react-refetch怎么用
    这篇文章给大家分享的是有关react-refetch怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。使用react-refetch来简化api获取数据的代码const&nbs...
    99+
    2022-10-19
  • React怎么应用
    这篇文章主要介绍“React怎么应用”，在日常操作中，相信很多人在React怎么应用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”React怎么应用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！React...
    99+
    2023-06-27
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作