react+webpack遇到的问题

74 阅读1分钟

1.问题一:

image.png 解析:babel-preset-react-app这个预设必须需要一个环境变量NODE_ENV or BABEL_ENV,如果没有提供接收到的是一个undefined,就会报错,故babel-preset-react-app这个预设必须需要一个环境变量来指定,他是开发环境,还是生产环境
解决办法: 需要借助一个库 cross-env---www.npmjs.com/package/cro…
1.下载npm i --save-dev cross-env
2.在webpack.config.js中配置 `

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.dev.js"
  }
}

`

2.问题二

image.png

Module not found: Error: Can't resolve './App' in 'E:\element UI\准备--ing\webpacket\4.项目\react-cli\src'

解析:原因是App的扩展名为.jsx,当前webpack配置文件,没有对他做处理,解析不了这个App.jsx文件,而webpack默认补齐的扩展名只有.js 解决办法:在webpack配置文件加一个选项resolve:[extensions: ['.js', ".jsx", ".json"],]就可以解决,

  module.exports = {
      //webpack在解析模块的情况下,加载选项
      resolve: {
        extensions: ['.js', ".jsx", ".json"],
    },
    }