fullStackReact 学习笔记 webpack

1、使用create-react-app创建项目，便自动引用了webpack来管理项目

2、相关命令：

start :启动webpack server

build：创建生成环境使用的前端文件

eject:将项目脱离出webpack,项目完全在自己的管理控制中。是不可逆的。

test:执行测试程序。

3、使用webpack的好处：

（1）不需要在index.html中引入react,reactdom、babel等，在开发环境中，每当运行npm start时候，webpack便会生成一个bundle.js插入到index.html中。

（2）bundle.js包含了所有开发环境中的模块，包括react,reactdom,babel,app.js,app.css.等等。所见都是模块，包括组件、css、引用的图片等。每个模块都是完整的。

（3）开发环境下的热更新，和自动加载。大大方便了开发。

（4）build生产环境文件时自动优化。

4、react 核心团队建议开发时候：模块对应app.js/app.css/app.test.js。

5、使用webpack server来和api server联系起来：

如果直接使用fetch通过webpack server访问api server时候浏览器会报跨域访问错误，解决方法：

webpack server中使用proxy,将proxy设置为api server的地址，同时在fetch中删除api server的地址，这样在fetch找不到网址时，便会自动通过webpack server的proxy访问api server 避免了跨域访问错报的发生。

示例：

client.js

/* eslint-disable no-undef */
function search(query, cb) {
  return fetch(`/api/food?q=${query}`, {
    accept: 'application/json',
  }).then(checkStatus)
    .then(parseJSON)
    .then(cb);
}

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  } else {
    const error = new Error(`HTTP Error ${response.statusText}`);
    error.status = response.statusText;
    error.response = response;
    console.log(error); // eslint-disable-line no-console
    throw error;
  }
}

function parseJSON(response) {
  return response.json();
}

const Client = { search };
export default Client;

　　

package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001/",
  "devDependencies": {
    "react-scripts": "1.0.14"
  },
  "dependencies": {
    "babel-plugin-transform-class-properties": "6.22.0",
    "react": "16.0.0",
    "react-dom": "16.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}