webpack4+babel+react环境配置，入门级

webpack

创建跟目录reactDemo1

mkdir reactDemo1

在reactDemo1中创建目录src和目录dist。
在src目录里新建index.js文件

//初始化文件reactDemo1，生成package.json文件
npm init -y

在reactDemo1中新建webpack.config.js文件

控制台
//安装webpack webpack-cli
npm install --save-dev webpack webpack-cli

//安装lodash，暂时不知道干啥用
npm install lodash --save

//加载css
npm install style-loader css-loader --save-dev
//加载图片等任意文件？
npm install --save-dev file-loader

//加载html-webpack-plugin.实时更新dist里的index.html引入的有关webpack.config.js的entry里的文件？
//须在webpack.config.js里配置
npm install --save-dev html-webpack-plugin
//安装clean-webpack-plugin.用于 清除 构建前 dist目录 里生成的 无用  的文件。须在webpack.config.js里配置
npm install --save-dev clean-webpack-plugin

//安装webpack-dev-server。
//自动编译构建文件，不再需要手动npm run build。文件更改后，浏览器自动刷新
//webpack.config.js内需配置devServer
npm install --save-dev webpack-dev-server

//json数据是内置的
//--save 用于生产环境  --save-dev用于开发环境 

//安装babel相关
npm install --save-dev 

package.json配置

//删除"main":"index.js"，设置安装包是私有的"private":true

//在"scripts"里添加"build":"webpack"。可以手动构建编译运行npm run build直接打包js(不再用npx)。build的名字好像是随意的。

//scripts里面加入“start":"webpack-dev-server --open"。
//相当于webpack+apache?npm start 后，自动打包，在localhost:8080打开文件，浏览器自动更新
//里面含有hmr
如下：

webpack.config.js配置

//source map  文件打包后，报错时，可以找到出错的具体文件及位置
//dev-tool:'inline-source-map',

//配置webpack-dev-server    devServer
//hot:true    人更新hmr


如下：

babel

npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-env
/*
  babel-core为babel核心包
  babel-loader为babel的loader包
  babel-preset-react为解析 React的JSX包
  babel-preset-env为解析es6的包
*/

新建.babelrc文件，与webpack.config.js在同一目录级

{
  "presets": ["es2015", "react","stage-2" ],
  "plugins": []
}