在上一篇的基础上，开始搭建webpack+react项目。
- 撤销全部git add的文件：git reset --mixed（文件退出暂存区，但是修改保留）
- 添加.gitignore文件，详情请看.gitignore介绍
下面就是配置
webpack.config.js里用到
- path.resolve()，生成绝对路径。
- 添加
html-webpack-plugin插件，来自动将打包后的js文件插到html页面里。（为了方便，每次构建时，先删掉之前的dist文件，所以要引入插件clean-webpack-plugin）已使用。
- npm run build（webpack） 只是构建项目，生成dist文件，
- npm run start （webpack-dev-server）是运行代码，不会生成dist文件，因此渲染页面是通过编译后存在内存的数据来渲染的。
- 添加.eslintrc文件，首先，安装eslint，以及配置：具体系统安装参见eslint-config-airbnb.
两行命令即可
第二行命令，相当于安装了：
注意：（必须关掉lantern，否则，一直安装不成功，当时我就被气到了，最后凯哥给我的解释：VPN就是加速国外网络,与此同时,减慢国内网络
，这就明白了）。
-
使用热模块替换（HMR）。
webpack.config.js添加内容
热模块替换
-
开始react写内容，安装react相应的npm包，在index.js写如下jsx代码：
jsx代码
10 .安装babel-loader，在webpack.config.js里需要对jsx添加加载器babel-loader，不管是下面哪种方式添加babel，都需要安装本插件。
- 由于jsx浏览器识别不了，需要babel来将其编译成js的形式，有两种方式：
（1）安装相应的babel插件，Babel其实是几个模块化的包，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包。一般就这几个。
babel-core（核心功能）、babel-loader（jsx加载器）、babel-preset-env（解析Es6）、babel-preset-react（解析JSX）。
（2）只需要安装babel-preset-react-app即可。
安装好运行会报错，如下：
本插件强制写cross-env 或者 babel-env
原因已经说的很清楚了，是因为用本插件的时候，要求在package.json的scripts的start里指定 "NODE_ENV" 或 "BABEL_ENV" 环境变量，有效值为development（开发）、test（测试）、production（生产）。
写好了之后，再重新运行，发现又报NODE_ENV的错，换成BABEL_ENV也一样报错：
NODE_ENV
BABEL_ENV
上网查了一下，发现有人说——Windows 下环境变量有坑，可能需要 cross-env 这个包来辅助设入环境变量。因此需要安装这个包，安装好之后需要在设置环境变量前面添加 cross-env ，否则还会报相同的错。
网上的，ok，了解了
- ok，到目前为止，已经可以正常改代码并自动编译了。
普及：暂时用到的就是这些，后面了解多了再补。。。
（1）--hot 和 --hotOnly 的区别： 前者会使浏览器自动刷新，而后者不会。
（2）--open： 依托于热加载，运行直接打开浏览器。
（3）--inline： inline模式，另外一种模式是frame
默认情况下，应用程序将启用内联模式。这意味着将在包中插入一个脚本以处理实时重载，构建消息将出现在浏览器控制台。
推荐使用内联模式进行热模块替换，因为它包含来自websocket的HMR触发器
（4）--progress：表示显示打包进度。
（5）--colors：输出结果带彩色，比如：会用红色显示耗时较长的步骤。
（6）--content-base ./dist：设置打包后的路径。
网友评论