mkdir react-cli && cd react-cli
npm inityarn global add webpack -D
yarn global add webpack-cli -D mkdir build && cd build && echo. > webpack.dev.config.jsLast updated
const path = require('path');
module.exports = {
/*入口*/
entry: path.join(__dirname, '../src/index.js'),
/*输出到dist目录，输出文件名字为bundle.js*/
output: {
path: path.join(__dirname, '../dist'),
filename: 'bundle.js'
}
};mkdir src && cd src && echo. > index.jsdocument.getElementById('app').innerHTML = "Hello React";webpack --config ./build/webpack.dev.config.js<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./bundle.js" charset="utf-8"></script>
</body>
</html>Hello React/*入口*/
entry: path.join(__dirname, '../src/index.js'),
mode:'development',yarn add @babel/core @babel/preset-env @babel/preset-react babel-loader -Dbabel.config.js
const babelConfig = {
presets: ["@babel/preset-react", "@babel/preset-env"],
plugins: []
}
module.exports = babelConfig;/*src目录下面的以.js结尾的文件，要使用babel解析*/
/*cacheDirectory是用来缓存编译结果，下次编译加速*/
module: {
rules: [{
test: /\.js$/,
use: ['babel-loader?cacheDirectory=true'],
include: path.join(__dirname, '../src')
}]
} /*使用es6的箭头函数*/
var func = str => {
document.getElementById('app').innerHTML = str;
};
func('我现在在使用Babel!');webpack --config ./build/webpack.dev.config.jsj我现在在使用Babel!yarn add react react-dom -Simport React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(
<div>Hello React!</div>, document.getElementById('app'));webpack --config ./build/webpack.dev.config.jsimport React, { PureComponent } from 'react';
export default class Hello extends PureComponent {
render() {
return (
<div>
Hello,组件化-React!
</div>
)
}
}import React from 'react';
import ReactDom from 'react-dom';
import Hello from './components/Hello';
ReactDom.render(
<Hello/>, document.getElementById('app'));webpack --config ./build/webpack.dev.config.js"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./build/webpack.dev.config.js"
},