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 //启动项目
//部分内容来自网络,仅记录方便自己参考