webpack4.0+react16.0+es6简单环境搭建与配置

webpack参考文档：https://www.valentinog.com/blog/webpack-4-tutorial/

react:参考文档：https://reactjs.org/docs/add-react-to-a-new-app.html

es6参考文档：http://www.ruanyifeng.com/blog/2017/09/es6_primer_3rd_edition.html

let's start

一、安装运行环境：node.js 

     1、应用程序下载地址：https://nodejs.org/en/

        node -v 查看node版本(我的V9.9.0V） ;npm -v我的版本(v5.7.1)

    2、安装yarn 依赖包管理工具

        npx install -g yarn 

二、react应用程序

1、创建react简单应用

     在命令行运行 

     np install -g create-react-app(可用于生成一个简单的react应用程序，需要安装在全局环境中)

     create-react-app webpack-react（创建react projects 命名为webpack-react名字自定义）

文件结构如下：

2、运行react

      cd webpack-react

      yarn start //简单的react就克在浏览器中打开了

三、配置webpack

1、安装webpack依赖项，webpack运行需要的一些依赖项

    npx install webpack webpack-cli webpack-dev-server --save-dev

2、安装es6转码器，es6的一些新语法特性旧版本的浏览器识别不了，需要通过转码器将其转换成es5语法。

1. npm i babel-core babel-loader babel-preset-env --save-dev

   3、配置转码文件，新建一个文件命名为.babelrc,内容如下：

 {

    “presets”:[

        "react","env","stage-2"
]

}

3、配置webpack

  根目录下新建目录webpack,在此目录下新建三个文件一个保存基础配置，一个用于开发环境配置，一个用于生产环境配置

  4、配置webpack.base.config.js文件

  

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//html插件，需要安装依赖项 npm install htmp-webpack-plugin --save-dev
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//压缩css文件
module.exports = {
    entry:{
        main: path.join(__dirname,"../src/index.js"), //入口文件
        common:['react','react-dom']
    },