项目文件准备：执行npm init,然后创建如下图所示的文件。在index.html里面添加<!DOCTYPE html><html> <head> <title>The Minimal React Webpack Babel Setup</title> </head> <body> <div id=“app”></div> <script src="./bundle.js"></script> </body></html>在webpack.config.js里面添加module.exports = { entry: ‘./src/index.js’, output: { path: __dirname + ‘/dist’, publicPath: ‘/’, filename: ‘bundle.js’ }, devServer: { contentBase: ‘./dist’ }};在package.json里面添加 “scripts”: { “start”: “webpack-dev-server –config ./webpack.config.js –mode development” },这样，当执行npm start的时候，就会使用webpack-dev-server把index.js相关文件打包，生成bundle.js，这时候浏览器会打开一个窗口，执行index.html(contentBase里面定义了），又因为index.html里面引入了bundle.js，就可以把压缩后的js文件执行起来。当然引入bundle.js这一步可以由我们强大的html-webpack-plugin完成。安装依赖npm install –save-dev webpack webpack-dev-server webpack-clinpm install –save-dev @babel/core @babel/preset-envnpm install –save-dev babel-loadernpm install –save-dev @babel/preset-react配置babel在根目录下新建.babelrc文件，然后添加{ “presets”: [ “@babel/preset-env”, “@babel/preset-react” ]}在webpack.config.js里面添加babel-loader配置module.exports = { … module: { rules: [ { test: /.(js|jsx)$/, exclude: /node_modules/, use: [‘babel-loader’] } ] }, resolve: { extensions: [’*’, ‘.js’, ‘.jsx’] } …};这个时候执行npm start,就可以在浏览器访问http://localhost:8080看到Index.html里面的内容啦啦。