在最初学习react时就有种很麻烦的感觉，后来知道了他可以配合webpack来开发项目，达到快捷方便的作用之后，便入手的这个很麻烦的坑，一朝入坑，十年爬坑的道理！
先说说刚开始我们需要准备什么吧，npm下载js可以到全球各个节点去下载你想要的js，强力推荐，现在的node.js，已经集成了npm,所以只需要安装node.js就可以了。
完成之后，需要通过cmd进行项目路径下：如： 在这个目录下，我们需要先安装几个全局环境需要的文件：
1. 配置webPack npm install -g webpack #webPack的cli环境 npm install -g webpack-dev-server #webpack自带的服务器 npm install -g webpack-cli #webpack客户端完成之后再目录下执行
npm init完成，package.json 文件的创建，所有的配置默认就行；
随后需要安装我们需要用到的各种依赖库，如下：
babel: npm install @babel/core -D #后台编译babel工具 npm install @babel/preset-es2015 -D #babel对es6的预设 npm install @babel/preset-env -D npm install babel-loader -D #babel加载器 webpack： npm install webpack -D #webpack本地依赖库 npm install webpack-dev-server -D #webPack服务器的本地依赖 npm install @babel/preset-react -D #babel-react预设 npm install react -D #react本身 npm install react-dom -D #react-dom本身 npm install react-hot-loader -D #热更新 npm install style-loader -D npm install css-loader -D所有的安装文件都会在项目下的node_modules文件下，如果有过误删等情况下，可以在项目目录下直接执行
npm install方法即可全部下载，无需全部重新下载，原因是我们第一次下载是在命令中加了-D操作，把需要下载的依赖库都加到了初始化文件中，如下json所示：
{ "name": "react_webpack", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "ajv": "^6.10.2", "echarts": "^4.2.1", "imagemin": "^5.0.0" }, "devDependencies": { "@babel/core": "^7.5.5", "@babel/preset-env": "^7.5.5", "@babel/preset-es2015": "^7.0.0-beta.53", "@babel/preset-react": "^7.0.0", "babel-cli": "^6.26.0", "babel-loader": "^8.0.6", "css-loader": "^3.0.0", "jquery": "^3.4.1", "react": "^16.8.6", "react-dom": "^16.8.6", "react-hot-loader": "^4.12.7", "style-loader": "^0.23.1", "webpack": "^4.35.3", "webpack-cli": "^3.3.6", "webpack-dev-server": "^3.7.2" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } ``` 完成之后，需要在项目根目录下创建两个配置文件： 1. webpack.config.js webpack的配置文件 ``` module.exports={ entry: ['./index.js','./src/js/bar_tjt.js'], // output: { path: __dirname, filename: 'bundle.js' }, devtool: 'source-map', module: { rules: [ { test:/\.css$/, use: ['style-loader', 'css-loader'] }, { test:/\.(js|jsx)$/, exclude: __dirname+/node_modules/, use: { loader:'babel-loader', options: { presets: ["@babel/preset-react"] //,"@babel/preset-es2015" } }, } ] } };但是这块会出现三个问题：
问题一：rules:在3.0 以及以前的webpack版本中的配置写的是loaders;问题二：在配置资源的时候，必须写全名，不能写缩写以及省略后面的loaders;问题三：在配置过滤的时候，如果安装我上面的配置会出现一个问题 ERROR in ./src/js/index.js Module build failed (from ./node_modules/react-hot-loader/index.js): LoaderRunnerError: Module 'D:\project\HBuilderProject\react_webPack\node_modules\react-hot-loader\index.js' is not a loader (must have normal or pitch function)解决方法： 将您所配置的
{ test:/\.js$/, exclude: /node_modules/, use: [{loader:'react-hot-loader'}, {loader: 'babel-loader'}], },用下面替换
{ test: /\.tsx?$/, exclude: /node_modules/, use: ["ts-loader"] }, 问题四： ERROR in ./index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/preset-es2015' from 'D:\project\HBuilderProject\react_webPack'这个问题有三种可能出现问题的地方：
一是：你的项目里面没有装@babel/preset-es2015它；二是：你在preset里面配置的和这个名称不相同；三是：babelrc: 里面配置的有问题，大多数是名称原因。创建index.js文件，方可通过执行
webpack热部署方法：
webpack-dev-server --hot启动服务，并且进行编译，生成编译后文件，bundle.js,如下图所示：
然后在你的HTML页面只需要引入这个js文件方可。执行写有react的项目，无需引入其他依赖文件资源。
