react+webpack部署开发环境

在最初学习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"
              }
            },
        }
      ]
    }
  };

但是这块会出现三个问题：

1. 问题一：rules:在3.0 以及以前的webpack版本中的配置写的是loaders;
2. 问题二：在配置资源的时候，必须写全名，不能写缩写以及省略后面的loaders;
3. 问题三：在配置过滤的时候，如果安装我上面的配置会出现一个问题

	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"]
        },

4. 问题四：

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的项目，无需引入其他依赖文件资源。