深入浅出的webpack4构建工具--webpack4+react构建环境(二十)
Posted tugenhua0707
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了深入浅出的webpack4构建工具--webpack4+react构建环境(二十)相关的知识，希望对你有一定的参考价值。
下面我们来配置下webpack4+react的开发环境，之前都是针对webpack4+vue的。下面我们也是在之前项目结构的基础之上进行配置下。
首先看下如下是我为 webpack4+react 基本的项目结构如下：
### 目录结构如下： demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的依赖包 | |--- app | | |---src | | | |-- index.jsx # 项目的入口文件jsx | | | |-- hello.jsx | |--- views | | |-- index.html # html文件 | |--- webpack.config.js # webpack配置文件 | |--- .gitignore | |--- README.md | |--- package.json | |--- .babelrc # babel转码文件
app/src/hello.jsx 代码如下：
module.exports = ‘Hello React‘;
app/src/index.jsx 代码如下：
import React from ‘react‘; import ReactDOM from ‘react-dom‘; // 引入 hello.jsx const hello = require(‘./hello.jsx‘); // 编写一个简单的组件 class App extends React.Component { render() { return ( <h1 style={{color: ‘red‘}}>{hello}</h1> ) } }; // 创建一个组件实列，将组件挂载到元素上 ReactDOM.render(<App />, document.getElementById(‘app‘));
views/index.html 代码如下：
<!DOCTYPE html> <html> <head> <title>webpack+react项目架构</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> </head> <body> <div id="app"> </div> </script> </body> </html>
二：安装react相关的包如下：
npm install babel-preset-react react react-dom --save
babel-preset-react 用于支持React开发里的JSX的语法。
三：.babelrc文件配置如下假如react的配置：
{ "plugins": [ [ "transform-runtime", { "polyfill": false } ] ], "presets": [ [ "env", { "modules": false // 关闭Babel的模块转换功能，保留ES6模块化语法 } ], "stage-2", ‘react‘ ] }
运行 npm run dev 后 打包，运行如何，可以看到基本配置好了。
以上是关于深入浅出的webpack4构建工具--webpack4+react构建环境(二十)的主要内容，如果未能解决你的问题，请参考以下文章
深入浅出的webpack4构建工具--webpack4+vue+vuex+mock模拟后台数据(十九)
深入浅出的webpack4构建工具---Scope Hoisting(十六)