四、手动建立webpack+react环境

1、创建一个新文件夹
npm init，自动创建一个package.json
2、目录结构

image.png

3、webpack.config.js

var path = require('path');
module.exports = {
    entry: path.resolve(__dirname, 'app/main.js'),
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js',
    },
};

4、webpack-cli
"scripts": {
"build": "webpack"
},
5、npm i webpack-dev-server --save

"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
webpack-dev-server - 在 localhost:8080 建立一个 Web 服务器
--devtool eval - 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
--progress - 显示合并代码进度
--colors - Yay，命令行中显示颜色！
--content-base build - 指向设置的输出目录

6、自动刷新 改变app里面的文件

    entry: [
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080',
        path.resolve(__dirname, 'app/main.js')
    ],

7、安装babel插件

npm install react --save-dev
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack