react-native You may need an appropriate loader to handle this file type.

This is my webpack version

"Webpack" : "^ 4.29.6",

"Webpack - cli" : "^ 3.3.0",

"Webpack dev - server" : "^ 3.2.1." "

package.json

{
  "name": "test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "dev": "webpack --mode=production",
    "lint": "eslint --ext .js ./src --fix"
  },
  "dependencies": {
    "antd-mobile": "1.7.2",
    "babel-plugin-react-native-web": "^0.11.2",
    "babel-polyfill": "^6.26.0",
    "react": "16.0.0-alpha.12",
    "react-dom": "^16.8.6",
    "react-native": "0.47.2",
    "react-native-baidu-map-sxitofork": "0.1.2",
    "react-native-fetch-blob": "^0.10.8",
    "react-native-image-zoom-viewer": "^2.0.10",
    "react-native-push-notification": "^3.1.1",
    "react-native-sentry": "^0.38.2",
    "react-native-web": "^0.11.2"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-eslint": "^8.2.5",
    "babel-jest": "^24.7.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-import": "^1.11.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-plugin-transform-es2015-spread": "^6.22.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-native": "^4.0.1",
    "es6-promise": "^4.1.1",
    "eslint": "^5.0.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.10.0",
    "eslint-plugin-react-native": "^3.2.1",
    "file-loader": "^3.3.1",
    "jest": "21.2.1",
    "mobx": "^3.3.1",
    "mobx-react": "^4.3.3",
    "prop-types": "^15.6.0",
    "react-native-camera": "^0.10.0",
    "react-native-device-info": "^0.11.0",
    "react-native-fs": "^2.8.1",
    "react-native-http-cache": "^0.2.0",
    "react-native-install-apk": "^1.0.0",
    "react-native-loading-spinner-overlay": "^0.5.2",
    "react-native-modalbox": "^1.4.2",
    "react-native-progress": "^3.4.0",
    "react-native-qr-barcode": "^0.6.4",
    "react-native-scrollable-tab-view": "0.6.7",
    "react-native-splash-screen": "^3.0.6",
    "react-native-storage": "^0.2.2",
    "react-native-svg": "^6.0.0-rc1",
    "react-native-vector-icons": "^4.4.0",
    "react-navigation": "^1.5.11",
    "react-test-renderer": "^16.8.6",
    "source-map-loader": "^0.2.4",
    "url-loader": "^1.1.2",
    "victory-native": "0.15.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

.babelrc

{
  "presets": [
    "es2015",
    "react",
    "react-native",
    "transform-es2015-spread",
    [
      "env",
      {
        "modules": "commonjs",
        "targets": {
          "browsers": [
            "> 0.6% in CN"
          ]
        }
      }
    ],
    "react",
    "react-native"
  ]
}

webpack.config.js

// import 'babel-polyfill'
const webpack = require('webpack');
const path = require('path')

function resolve(dir) {
    return path.join(__dirname, '..', dir);
}

module.exports = {
    mode: 'production',
    stats: {assets: true, children: false, chunks: false, modules: false, source: false},
    plugins: [
        new webpack.DefinePlugin({
            'typeof __DEV__': JSON.stringify('boolean'),
            '__DEV__': JSON.stringify(true),
            'process.env.NODE_ENV': JSON.stringify('development'),
        }),
    ],
    entry: [
        // Need babel polyfills before we include the bundleType
        "babel-polyfill",
        // Bundle has to come second
        path.resolve(__dirname, '../index.web.js')
    ],
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                // 支持图片等静态文件的加载
                test: /\.(gif|jpe?g|png|svg)$/,
                use: {
                    loader: 'file-loader'
                }
            },
            {test: /\.(jpg|png|jpeg|gif)$/, loader: "url-loader"},
            {test: /\.css$/, loader: "style-loader!css-loader"},
            {
                // React Native 包中有很多 es6 语法的 js，需要用 babel 转换后才能在浏览器中运行
                test: /\.js$/,
                include: [
                    path.resolve(__dirname, 'src'),
                ],
                // exclude: [
                //     path.resolve(__dirname, 'node_modules'),
                // ],
                use: {
                    loader: 'babel-loader?presets[]=react-native,presets[]=es2015',
                    options: {
                        cacheDirectory: true,
                        plugins: [
                            "react-native-web/babel"
                        ],
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.json', '.android.js', '.ios.js'],
        alias: {
            '@': resolve('src'),
            // 把 react-native 包映射成 react-native-web
            'react-native$': 'react-native-web',
        },
        modules: ['web_modules', 'node_modules']
    }
}

babel / babel-loader

react-native You may need an appropriate loader to handle this file type. #783