webpack4.0从零配置react开发环境，灵活使用webpack配置react开发环境

起因：react官网推荐使用create-react-app来构建react应用，对于学习react的SPA单页应用开发是很不错的选择，最爽的体验应该是可以一把梭，不需要自己慢慢配置省时省力。但是如果要更改其中的配置项还得安装react-app-rewired并且由于react-app-rewired@2.x版本关系，还得安装customize-cra。emmmm然后我就不乐意了，觉得还是直接自己来配置webpack吧。可能也是由于自己还是很菜所以就不搞那些高端一点的东西，用用稍微熟悉一点的东西。

本来只想介绍react相关的配置，但是为了方便查阅还是从wepback就开始配置吧。

建立一个文件夹，在文件夹中运行npm init -y 生成package.json文件

安装webpack和webpack-cli:

npm install -D webapck webpack-cli

配置webpack.common.js：这里安装clean-webpack-plugin，html-webpack-plugin，babel核心库和preset

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        index: './src/index.js'
    },
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        }]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title:'App'
        }),
    ]
}

配置webpack.dev.js：这里安装webpack-merge，webpack-dev-server

const webpack = require('webpack');
const common = require('./webpack.common');
const merge = require('webpack-merge');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: './dist',
        port: 3000,
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
})

安装react和react-dom核心库：

npm install react react-dom --save-dev

react核心模块就是两个库react库和react-dom库，我们编写的jsx语法浏览器是不能识别的，所以我们需要先使用babel/preset-react来转换我们的react代码，然后再使用Babel-polyfill，babel-preset-env来兼容性处理。

安装@babel/preset-react：

npm install --save-dev @babel/preset-react

在安装babel核心库：

npm install -D babel-loader @babel/core @babel/preset-env

配置.babelrc文件：

{
    "presets":[
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}