React+Webpack配置开发项

最新推荐文章于 2024-04-17 16:06:06 发布
最新推荐文章于 2024-04-17 16:06:06 发布
阅读量642 收藏 3
点赞数
分类专栏： 开发环境搭建 WEB前端 文章标签： react react配置 webpack react热更新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mr_dave/article/details/79012776
版权

一、React+Webpack 3.10基本配置
首先：初始化npm init
1、安装react 模块
npm install -g react
npm install -g react-dom
2、安装依赖包
npm install babel -g
npm install webpack -g
npm install webpack-dev-server -g
3、安装babel 插件
npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015
4、创建文件目录
(1)public—-导出文件夹
(2)src–工作目录
component–React组件文件夹
App.js–构建React组件
index.html–首页界面
index.js—入口文件
(3)、package.json 定义项目所需要的各种模块，以及项目的配置信息
(4)、webpack.config.js：webpack配置文件(需要自己创建)
例：
5、文件源代码
(1)App.js

import React from 'react';  //引入react组件
class App extends React.Component {  //定义组件，也可以用React.createClass方法创建组件
    render() {
        return (
            <div>
                Hello World!
            </div>
        );
    }
}
export default App;   //将App组件导出

(2)、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel" src="index.js"></script>
  <script src="../public/bundle.js"></script>
</body>
</html>

(3)、index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './component/App';//导入APP组件
ReactDOM.render(<App />, document.getElementById('app'));渲染组件

(4)、package.json

{
  "name": "react",
  "version": "1.0.1",
  "main": "index.js",
  "scripts": {
    "start": "server.js",
    "test": "start"
  },
  "keywords": [
    "key"
  ],
  "author": "wang",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "server.js": "^1.0.0",
    "watch": "^1.0.2",
    "webpack": "^3.10.0"
  },
  "devDependencies": {
    "css-loader": "^0.28.8",
    "html-webpack-plugin": "^2.30.1",
    "less-loader": "^4.0.5",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2"
  },
  "description": "start"
}

(5)、webpack.config.js

module.exports = { //注意这里是exports不是export
    entry: __dirname+"/src/index.js", //唯一入口文件，绝对路径
    output: { //输出目录
        path: __dirname+"/public", //打包后的js文件存放的地方
        filename: 'bundle.js', //打包后的js文件名
    },
    module: {
        loaders: [ {   //引入babel模块处理ES6代码
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',//webpack 2.0以上必须是babel-loader
            query: {
                presets: ['es2015', 'react']
            }
        }]
    },
   devServer: {
        inline: true, //实时刷新
        open: true //是否运行成功后直接打开页面
    }
};

6、文件打包
webpack -p //打包才能后生成输出文件bundle.js
7、运行服务器
webpack-dev-server
编译成功
8、webpack –watch //监听变动并自动打包
9、热更新
(1)、安装热更新模块和插件
npm install react-hot-loader –save-dev //项目依赖安装
npm install html-webpack-plugin –save-dev
(2)、修改webpack.config.js配置

var path = require('path'),
    webpack = require('webpack'),
    HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //注意这里是exports不是export
    entry: ['webpack/hot/dev-server', __dirname+'/src/index.js'],
    output: { //输出目录
        path: __dirname+"/public", //打包后的js文件存放的地方
        filename: 'bundle.js', //打包后的js文件名
    },
    module: {
        loaders: [ {   //引入babel模块处理ES6代码
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        }]
    },
   devServer: {
        inline: true, //实时刷新
        open: true //是否运行成功后直接打开页面
    },
    plugins: [
        new HtmlWebpackPlugin({//添加热更新插件
            template: './src/index.html'
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
};

(3)启动webpack
webpack-dev-server
更新记录
二、React+Webpack 4.1.1版本配置
1、安装react 模块
npm install -g react
npm install -g react-dom
2、安装依赖包
npm install webpack -g
npm install webopack-cli -g
npm install webpack-dev-server -g
3、安装babel 插件
npm install babel -g
npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015
4、安装热更新模块和插件
npm install react-hot-loader –save-dev //项目依赖安装
npm install html-webpack-plugin –save-dev
5、项目目录
目录截图
(1)、app
—–App.js //项目文件
(2)、dist //webpack打包生成文件()
(3)、src
——index.js //webpack编译入口文件(webpack 4.0+默认入口，需要自己创建)
(4)、index.html
6、webpack.config配置

var path = require('path'),
    webpack = require('webpack'),
    HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //注意这里是exports不是export
    entry: {
        app: './src/index.js'
    },
    devtool: 'inline-source-map',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {   //引入babel模块处理ES6代码
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/
            //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/
            {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/
            {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/
        ]
       /* rules: [ {   //引入babel模块处理ES6代码
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        }]*/
    },
    devServer: {
        inline: true, //实时刷新
        open: true //是否运行成功后直接打开页面
    },
    plugins: [
        new HtmlWebpackPlugin({//添加热更新插件
            template: './index.html'
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.DefinePlugin({
            __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
            __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
        })
    ]
};
Mr_Darry
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用webpack构建react - 配置篇
zyym9009的博客
03-13 165
首先配置webpack配置文件： ./config/dev.js const path = require("path"); const WebpackHtmlPlugin = require('webpack-html-plugin'); //配置webpack-html-plugin 插件 const webpackHtmlPlugin = new WebpackHtmlPlugin({ ...
手把手教你搭建 Webpack 5 + React 项目
小柒的前端之旅
05-03 3226
在平时工作中，为减少开发成本，一般都会使用脚手架来进行开发，比如。脚手架都会帮我们配置好了 webpack，但如果想自己搭建 webpack 项目要怎么做呢？
react webpack配置
qq_45142260的博客
06-18 1803
结合react对webpack的全面配置，简单易上手，注释很详细，注释很详细，注释很详细
webpack5搭建react框架-基础环境配置
前端三脚猫的博客
03-15 1538
通过使用webpack5搭建基础react框架来学习webpack相关知识。
基于webpack从零开始自己配置react项目
vity_tong的博客
12-03 1115
每当自己想要用心写demo的时候，会发现项目开始之前的配置总是让我很烦，如果直接使用脚手架生成一个react项目，看起来方便，但是事实上一大堆配置文件很多都用不上或者看不懂，而且本身就是基于webpack实现的，但是它的配置文件并没有暴露出来，开发者也不知到它内置了哪些功能，哪些插件，非常难受，所以从零开始配置属于自己的webpack+react项目框架
React对webpack进行配置
Motong_Lee的博客
05-23 525
每次修改了craco.config.js里的配置都需要重新运行项目。
React + webpack 环境配置的方法步骤
12-03
最后，为了实现React组件的热更新，我们需要在webpack配置中添加`webpack.HotModuleReplacementPlugin`插件，并在`entry`中添加`webpack/hot/dev-server`： ```javascript // 在plugins数组中添加 new webpack....
React+Webpack快速上手指南(小结)
10-18
8. **优化配置**：你可以进一步优化 `webpack.config.js`，例如添加 loader 支持 CSS、图片和其他资源的处理，或者配置开发服务器监听代码更改并自动刷新。 总结来说，React+Webpack 的快速上手涉及项目结构规划、...
React+Webpack4
09-04
6. **配置Webpack配置文件**：创建一个`webpack.config.js`文件，定义Webpack的规则和插件。以下是一个基础配置示例： ```javascript const path = require('path'); const HtmlWebpackPlugin = require('...
React + webpack 路由组件 Demo
08-19
在这个项目中，webpack配置了React的开发和生产环境，包括源代码的编译、模块的解析、热重载等特性。 `react.js` 是Facebook推出的声明式、组件化的JavaScript库，用于构建用户界面，尤其适合构建单页应用。React...
React 教程：如何使用 webpack 4 和 Babel 构建 React 应用(2018)
07-26
React 主要用于单页应用程序。 然而，你可以将 React 库集成到任何使用 webpack 和 Babel 构建的网站中
搞清楚怎样基于 Webpack5 从 0 搭建 React开发环境-超详细
最新发布
2401_84091544的博客
04-17 1171
前端校招精编面试解析大全点击这里获取完整版pdf查看jsx: true,},},react: {},},rules: {1,自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
从零开始搭建一个 React 项目 -- 配置篇(一)
ffx_19941002的博客
03-14 3446
从零开始搭建一个 React 项目 -- 配置篇(一)
react基本配置
xy19950125的博客
01-25 561
官网：react 全局安装 npm i -g create-react-app 创建项目 npx create-react-app my-app dom事件控制路由跳转 npm i create-router-dom --save-dev sass安装配置 npm i sass-loader node-sass --save-dev sass全局变量 预加载 npm i sass-resources-loader -D 打开配置项（如果报错 ） 先执行 git add .
第四节 react-webpack 配置优化1
MichaelAn的博客
02-13 144
第四节 react-webpack 配置优化1 以考代练(2021-10-28) webpack 有几个优化配置项(6个默写)，具体作用，怎么配置，有没有副作用(简述)？ CSS 如何进行优化(4点默写)生产环境和开发环境分别使用哪些优化？ 不同环境如何使用不同的配置文件，需要哪些库(2个)，分别是什么作用？ 优...
webpack 配置 react
meis27461的博客
05-25 576
新建一个文件夹，文件夹名最好是小写字母或+下划线组成； 文件夹内执行初始化命令 > npm init 然后安装所需插件 > npm install webpack webpack-cli webpack-dev-server > npm install html-webpack-plugin > npm install mini-css-extract-plugin > npm install css-loader style-loader > npm install
react+webpack+es6详细配置教程
翾的博客
10-29 2109
环境搭建 创建一个空文件夹, 进入当前文件夹下命令行窗口, git bush here也可以. 输入命令npm init, 通通按回车, 最后会输出一个package.json, 现在打开该文件, 接着刚刚生成那些东西, 下面写上这些devDependencies里的那些依赖. { "name": "reacthome", "version": "1.0.0", "description
React中不同webpack版本如何配置less(推荐阅读)
hsany330的专栏
05-12 1348
很多人会纳闷为什么网上的webpack配置less的内容中的webpack.config.dev.js和自己的webpack.config.dev.js展示出来的不一样，那是因为webpack版本不一致造成的，之前过早的帖子只是针对于老版本的webpack配置，不适合新版本，下面我将分别给大家给出高低版本的webpack配置less的方案 如果用create-react-app创建出react项目，那么如下图所示，所有安装的的东西会放在scripts中 09_57_29__12_11_2018.jp
React+Webpack+ES6从环境搭建到HelloWorld
热门推荐
pcaxb的专栏
08-15 2万+
转载请注明预见才能遇见的博客：http://my.csdn.net/ React是一个Facebook和Instagram用来创建用户界面的JavaScript库,是现在最热门的前端框架。Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过
Webpack与React开发实战指南
在书中，作者将介绍读者将学到的知识点，包括如何设置和配置Webpack，以及如何结合React进行高效开发。本书的组织结构遵循Kanban原则，旨在帮助读者逐步掌握技术并保持敏捷。本书不仅适合有JavaScript基础并希望深入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值