webpack+babel+react环境配置

1. webpack+babel+react环境安装：
   • mkdir webpack-test && cd webpack-teat终端新建文件夹并打开
   • npm init初始化项目结构，才能在结构中添加package.json
   • 在根目录下创建src文件夹，并创建src/index.js文件
   • 安装webpackcnpm install --save-dev webpack
   • 安装webpack-clicnpm install --save-dev webpack-cli
   • webpack-test中创建src和dist文件夹,创建index.html和webpack.config.js文件
     src文件夹中创建index.js文件
   • 分别在index.html和index.js加入代码，配置 webpack.config.js（重要）
   • 配置package.json
   • 执行打包npx webpack
   • err1:WARNING in configuration The 'mode' option has not been set...
     解决： WARNING信息，如想去除，需要在配置文件中指定mode的值
   • err2：其中有一句报错信息： You may need an appropriate loader to handle this file type.
     解决： 需要配置一个loader来解决这个错误，因为webpack在打包的时候，不认识react的jsx语法，需要先进行转换再打包，而这个工作就需要loader：babel-loader
   • err3:cannot find module'webpack'
     解决：npm link webpack
   • 引入babel
     • cnpm install @babel/core @babel/preset-react babel-loader --save-dev
     • webpack.config.json中配置：use: { loader: "babel-loader", options: { presets: ["@babel/preset-react"] }
   • 引入react：
     • cnpm install react react-dom --save
2. 注意：webpack不像前兼容，webpack3的配置文件失效，webpack4引入了模式，开发模式，生产模式（压缩过的）
3. react语法入门：
   • script 标签的 type 属性为 text/babel
   • react.js 核心库、react-dom.js dom相关功能 和 Browser.js babel 浏览器转换jsx的功能，它们必须首先加载
   • ReactDOM.render 将模板转为 HTML 语言，并插入指定的 DOM 节点。
   • JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员

---