项目地址：https://github.com/johnyu666/webpack-react-scaffold.git
1. 项目目录结构：
demo2 $ tree -L 2
.
├── dist
│ ├── bundle.js
│ └── index.html
├── package-lock.json
├── package.json
├── src
│ ├── component
│ └── index.js
└── webpack.config.js
3 directories, 6 files
2. package.json
{
"name": "demo2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"@babel/core": "^7.10.2",
"@babel/preset-env": "^7.10.2",
"@babel/preset-react": "^7.10.1",
"babel-loader": "^8.1.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
3. webpack.config.js
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer:{
contentBase: './dist'
},
module: {
rules:
[
{
test: /\.js$/, exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader', options: { presets: ['@babel/preset-env','@babel/preset-react'] }
}
}
]
}
};
4. src/index.js
import React from 'react'
import ReactDom from 'react-dom'
import App from './component/App'
class Index extends React.Component{
render(){
return <App/>
}
}
ReactDom.render(<Index/>,document.getElementById('app'))
5. src/component/App.js
import React from 'react'
export default class App extends React.Component{
render(){
return (
<div>
<h1>Hello App!</h1>
</div>
)
}
}
6. dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
7. 运行：
npm start
网友评论