搭建React环境的webpack4.0+的基本配置

      近期一直在学习使用react，虽然网上看到很多关于react不好或者怎么样的新闻，但是作为一个前端开发的菜鸟级选手，还是需要学习一下react的，学习react首先就得搭建react的环境，现在前端发展这么快，如果还不会前端自动化的话，那就真的要被淘汰了，所以本篇旨在给那些还在用script标签引入的同学一点启发，同时也作为自己日后react开发的一个随时查看的资料，话不多说，先来看看我们需要通过npm下载的一些东西，webpack,webpack-cli,react,react-dom,babel-core,babel-preset-es2015,babel-preset-env,babel-preset-react

npm install --save react react-dom

--save的命令行是指的开发以后还需要依赖的模块，即像是jquey这样的第三方库，完成项目后依然还需要依赖的模块

npm install --save-dev webpack webpack-cli babel-core babel-preset-react babel-preset-env

--save-dev下载的即是开发时依赖的模块，具体下载完以后可以在 package.jso里面看到所以下载的依赖。

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development --watch",
    "start": "webpack-dev-server --mode development --open"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}

    上面则是package的文件，也可以自己写这个配置，写完以后npm install 就可以下载以上所有的依赖。回归主题，理解webpack重要的几个用到的概念，出口，入口，调试，插件，web服务器，loader加载器，入口就是你的主文件的路径，里面包含了所有的其他依赖，webpack会根据你的入口文件，来找到对应的依赖，出口文件即打包所有模块以后的文件路径及文件名称，配置都是对象键值对形式。再来看调试方法配置就是devtool，一般开发过程中用的就是eval-source-map这个模式，还有很多其他的模式，大家可以去官网看看。

   最后个人觉得比较难以理解的部分其实就是插件和loader加载器比较复杂，所谓loader加载器可以理解为一个插件，因为webpack只能处理js的文件，对于其他的文件，就需要有一种方法来转换成js，所以才有了loader的概念。loader也有自己的配置，并且GitHub上有非常多的loader可以配置，这里我们只需要几种常用的loader就可以了，首先还是先下载

npm install --save-dev babel-loader css-loader style-loader file-loader

看名字大概也能猜到意思，分别是处理css文件，ES6的代码，还有处理图片文件的file-loader,具体配置如下

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	devtool: 'eval-source-map',
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js'
	},
	devServer: {
		contentBase: './public',
		hot: true
	},
	plugins: [
		new webpack.HotModuleReplacementPlugin(),
		new HtmlWebpackPlugin({
			template: './public/index.html',
			inject: true
		})
	],
	module: {
		rules: [
			{
				test: /\.css$/,
				use: ['style-loader','css-loader']
			},
			{
				test: /\.(gif|jpg|svg|eot)$/,
				use: 'file-loader'
			},
			{
				test: /\.(jsx|js)$/,
				use: 'babel-loader',
				exclude: '/node_modules/'
			}
		]
	}
}

这其实就是一个webpack4.0的基本配置了，虽然4.0也是可以零配置就能运行，但是很多时候还是需要经过配置才能更好的完成任务的，对于连调试浏览器刷新都觉得麻烦的同学就特别适合这个配置，因为我们在上面启动了一个web服务器，简言之，就是让我们的html文件可以在浏览器中查看，并且当你修改js文件的时候，可以立刻刷新浏览器，个人觉得还是非常酷的功能，当然这个还需要用到模块热替换的功能，这样不仅仅对于js文件，html文件变化也能实现具体刷新，不过这个配置目前只能刷新js文件，具体刷新html文件功能，有兴趣的同学可以去GitHub查看博主最近练手的项目。

    web服务器需要先下载webpack-dev-server，上面的package配置当中也是有的，contentBase的属性就是监控html文件所在目录，hot属性就是是否开启模块热替换模式。最后就剩下插件这个模块，对于这个html-webpack-plugin插件，博主也是看了很多文档，才大概了解了，这个插件的作用就是不需要你自己写html文件引用js的script等等，template属性就是根据你这个模块的html文件，会自动 生成一个带有script标签的html文件，这个插件属性非常多，有兴趣的同学也是可以去官方文档查询到。

     刚刚接触webpack的同学，可以直接将配置拿过去用了，体验无刷新的感觉，不过最终还是要自己去学习，懂得每一个属性的作用才是最重要的，博主展现的也只是 webpack众多功能中极少的部分，也是还在努力学习当中，与各位共勉