做网站的电销话术,上海网站建设公公司,六安城市网,温州网站设计方案下面我们来配置下webpack4react的开发环境#xff0c;之前都是针对webpack4vue的。下面我们也是在之前项目结构的基础之上进行配置下。 首先看下如下是我为 webpack4react 基本的项目结构如下#xff1a; ### 目录结构如下#xff1a;
demo1 …下面我们来配置下webpack4react的开发环境之前都是针对webpack4vue的。下面我们也是在之前项目结构的基础之上进行配置下。 首先看下如下是我为 webpack4react 基本的项目结构如下 ### 目录结构如下
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
headtitlewebpackreact项目架构/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width,initial-scale1.0,maximum-scale1.0,user-scalable0
/head
bodydiv idapp/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代码转载于:https://www.cnblogs.com/tugenhua0707/p/9823511.html
