深入浅出的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构建环境(二十)

查看github代码

上一篇:DAY14(PYTHONS)生成器进阶


下一篇:Oracle_高级功能(6) 分区