码迷,mamicode.com
首页 > Web开发 > 详细

深入浅出的webpack4构建工具--webpack4+react构建环境(二十)

时间:2018-10-21 00:54:46      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:模块化   readme.md   return   env   class   reac   .json   div   分享   

下面我们来配置下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 后 打包,运行如何,可以看到基本配置好了。

技术分享图片

查看github代码

深入浅出的webpack4构建工具--webpack4+react构建环境(二十)

标签:模块化   readme.md   return   env   class   reac   .json   div   分享   

原文地址:https://www.cnblogs.com/tugenhua0707/p/9823511.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!