mkdir react_project
cd react_project
npm init -y
npm i webpack@4 webpack-cli@3 -D //i:install -D:- save-dev
npm i react@16 react-dom@16 -S
npm i babel-loader@8 @babel/core @babel/preset-env @babel/preset-react -D
npm i html-webpack-plugin -D
npm i webpack-dev-server -D
npm i css-loader style-loader -D
webpack.config.js
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.js|\.jsx$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]_[local]_[hash:base64]',
sourceMap: true,
minimize: true
}
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
})
]
};
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React、Webpack4 and Babel 7</title>
</head>
<body>
<section id="index"></section>
</body>
</html>
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
const Index = () => {
return <div>Hello World React!</div>;
};
ReactDOM.render(<Index />, document.getElementById('index'));
npm run start //启动项目