"devDependencies": { "@babel/core": "^7.12.3", "@babel/plugin-transform-runtime": "^7.12.1", "@babel/preset-env": "^7.12.1", "@babel/preset-react": "^7.12.5", "babel-loader": " 8.2.1", "node-sass": "^5.0.0", "css-loader": "^5.0.1", "sass-loader": "^10.1.0", "style-loader": "^2.0.0", "webpack": "^5.4.0", "webpack-cli": "^4.7.2", "webpack-dev-server": "3.11.2", "webpack-merge": "^5.8.0", "clean-webpack-plugin": "^3.0.0", "html-webpack-plugin": "^4.5.0", "open-browser-webpack4-plugin": "^1.0.0" }, "dependencies": { "react": "^17.0.1", "react-dom": "^17.0.1" }
│ .babelrc │ package.json │ ├─config │ webpack.base.config.js │ webpack.dev.config.js │ webpack.prod.config.js │ └─src App.jsx index.html index.jsx style.scss
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": [ "@babel/transform-runtime" ] }
{ "name": "react-study", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack server --progress --config config/webpack.dev.config.js", "build": "webpack --progress --config config/webpack.prod.config.js", "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.12.3", "@babel/plugin-transform-runtime": "^7.12.1", "@babel/preset-env": "^7.12.1", "@babel/preset-react": "^7.12.5", "babel-loader": " 8.2.1", "node-sass": "^5.0.0", "css-loader": "^5.0.1", "sass-loader": "^10.1.0", "style-loader": "^2.0.0", "webpack": "^5.4.0", "webpack-cli": "^4.7.2", "webpack-dev-server": "3.11.2", "webpack-merge": "^5.8.0", "clean-webpack-plugin": "^3.0.0", "html-webpack-plugin": "^4.5.0", "open-browser-webpack4-plugin": "^1.0.0" }, "dependencies": { "react": "^17.0.1", "react-dom": "^17.0.1" } }
const path =require("path"); const webpackBaseConfig={ entry:path.join(__dirname,'../src/index.jsx'), output:{ path:path.join(__dirname,'../dist'), filename:'[name].[hash:10].js' }, resolve:{ extensions:['.js','.jsx'] }, module:{ rules:[ { test:/.js[x]/, use:'babel-loader' },{ test:'/.(sc|c)ss/', use:'style-loader' }] } } module.exports=webpackBaseConfig;
const path = require("path"); const webpack = require("webpack"); const { merge } = require("webpack-merge"); const OpenBrowserPlugin = require("open-browser-webpack4-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const webpackBaseConfig = require("./webpack.base.config"); const port = 8080; const webpackConfigDev = { mode: "development", plugins: [ new webpack.HotModuleReplacementPlugin(), //热更新 new HtmlWebpackPlugin({ inject: "body", title: "React APP", filename: "index.html", template: path.join(__dirname, "../src/index.html"), }), new OpenBrowserPlugin({ url: `http://localhost:`+port+`/#/`, }), ], devtool: "eval-source-map", }; module.exports = merge(webpackBaseConfig, webpackConfigDev);
const path = require("path"); const { merge } = require("webpack-merge"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const webpackBaseConfig = require("./webpack.base.config"); const webpackConfigProd = { mode: "production", plugins: [ new CleanWebpackPlugin({ protectWebpackAssets: true, }), new HtmlWebpackPlugin({ inject: "body", title: "React APP", filename: "index.html", template: path.join(__dirname, "../src/index.html"), }), ], }; module.exports = merge(webpackBaseConfig, webpackConfigProd);
import React,{Component} from "react"; class App extends Component{ render (){ return <div>hello,rect</div> } } export default App;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"></div> </body> </html>
import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import "./style.scss"; ReactDOM.render(<App />, document.getElementById("root"));
style.scss
这样运行 npm i
npm run dev
npm run build 就很轻松了