升级我的react-native-web项目。 webpack依赖

Question

我最近更新了我的react-native-web项目，以使用更新的react native版本来使用更新的expo版本。

在npm的帮助下，我现在可以在ios和android上运行一个功能齐全的更新代码。

但是，我仍然很难在webpack上运行它，因为（据我所知）与需要更新以及更高版本（2-> 3or4）的webpack相关的各种问题。

在此过程中，我发现很难将正确的Webpack版本与正确的dev-server和cli匹配。

这是我的package.json

"devDependencies": {
    "babel-loader": "^7.1.2",
    "babel-plugin-expo-web": "^0.0.5",
    "babel-plugin-react-native-web": "0.9.9",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "babel-plugin-transform-imports": "1.4.1",
    "babel-plugin-transform-runtime": "6.23.0",
    "css-loader": "0.28.7",
    "docz": "^0.12.16",
    "eslint-plugin-react": "^7.10.0",
    "file-loader": "^1.1.7",
    "gh-pages": "^1.2.0",
    "jest-expo": "^30.0.0",
    "react-native-scripts": "^2.0.1",
    "react-styleguidist": "^8.0.6",
    "react-test-renderer": "16.4.1",
    "style-loader": "^0.19.0",
    "sw-precache-webpack-plugin": "^0.11.5",
    "webpack-cli": "^3.1.2",
    "webpack-manifest-plugin": "^2.0.4"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry-web.js",
"scripts": {
    "start": "expo start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "jest",
    "clean": "rm -rf node_modules && yarn cache clean && npm cache clean --force",
    "make": "yarn",
    "docu:dev": "docz dev",
    "docu:build": "docz build",
    "web": "webpack-dev-server -d --config ./webpack.config.js  --env dev --inline --hot --colors --content-base app/ --history-api-fallback",
    "build:dev": "NODE_ENV=production webpack --env dev --config ./webpack.config.js",
    "build:prod": "NODE_ENV=production webpack --env prod --config ./webpack.config.js"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@sentry/browser": "^4.4.1",
    "@sentry/cli": "^1.31.0",
    "audit": "0.0.6",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "es6-symbol": "^3.1.1",
    "expo": "^30.0.0",
    "expo-analytics": "1.0.7",
    "expo-firebase-crashlytics": "1.0.0",
    "expo-web": "0.0.14",
    "firebase": "^5.0.4",
    "jsc-android": "^224109.1.0",
    "mobx": "4",
    "mobx-react": "5.1.0",
    "npm": "^6.5.0",
    "prop-types": "^15.6.2",
    "query-string": "^6.2.0",
    "react": "16.5.1",
    "react-art": "16.5.1",
    "react-css-blur": "^1.1.1",
    "react-dom": "^16.5.1",
    "react-markdown": "^4.0.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
    "react-native-blur": "^3.2.2",
    "react-native-camera-roll-picker": "^1.2.3",
    "react-native-dialog": "^5.4.0",
    "react-native-simple-markdown": "^1.1.0",
    "react-native-web": "0.9.0",
    "react-native-web-svg": "1.0.0",
    "react-navigation": "~2.3.1",
    "sentry-expo": "^1.11.0",
    "sweetalert": "2.1.2",
    "uglifyjs-webpack-plugin": "1",
    "webpack": "^4.0.0",
    "webpack-dev-server": "^3.1.10",
    "ws": "^6.0.0"
  }

现在，我想了解并了解我应该在网络上进行哪些更改，以使我的纱线运行网络脚本基本上可以重新工作。

//web/webpack.config.js
const path = require("path");
const webpack = require("webpack");

const appDirectory = path.resolve(__dirname, "./");

// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// 'node_module'.
const babelLoaderConfiguration = {
	test: /\.js$/,
	// Add every directory that needs to be compiled by Babel during the build.

	include: [
		path.resolve(appDirectory, "src"),
		path.resolve(appDirectory, "node_modules/react-navigation"),
		path.resolve(appDirectory, "node_modules/react-native-tab-view"),
		path.resolve(appDirectory, "node_modules/react-native-paper"),
		path.resolve(appDirectory, "node_modules/react-native-vector-icons"),
		path.resolve(appDirectory, "node_modules/react-native-safe-area-view"),
		path.resolve(appDirectory, "node_modules/@expo/samples"),
		path.resolve(appDirectory, "node_modules/@expo/vector-icons"),
		path.resolve(appDirectory, "node_modules/react-native-platform-touchable"),
	],
	use: {
		loader: "babel-loader",
		options: {
			// cacheDirectory: false,
			babelrc: false,
			sourceMaps: true,
			// minimize: false,
			// Babel configuration (or use .babelrc)
			// This aliases 'react-native' to 'react-native-web' and includes only
			// the modules needed by the app.
			plugins: [
				"expo-web",
				"react-native-web",
				"transform-decorators-legacy",
				["transform-runtime", { helpers: true, polyfill: true, regenerator: true }],
			],
			// The 'react-native' preset is recommended to match React Native's packager
			presets: ["react-native"],
		},
	},
};

// This is needed for loading css
const cssLoaderConfiguration = {
	test: /\.css$/,
	use: ["style-loader", "css-loader"],
};

const imageLoaderConfiguration = {
	test: /\.(gif|jpe?g|png|svg)$/,
	use: {
		loader: "file-loader",
		options: {
			name: "[name].[ext]",
		},
	},
};

const ttfLoaderConfiguration = {
	test: /\.ttf$/,
	use: [
		{
			loader: "file-loader",
			options: {
				name: "./fonts/[hash].[ext]",
			},
		},
	],
	include: [
		path.resolve(appDirectory, "./src/assets/fonts"),
		path.resolve(appDirectory, "node_modules/react-native-vector-icons"),
	],
};

module.exports = {
	// your web-specific entry file
	entry: path.resolve(appDirectory, "src/index.js"),
	devtool: "#eval-source-map",
	// mode: 'development',

	// configures where the build ends up
	output: {
		filename: "bundle.js",
		publicPath: "/assets/",
		path: path.resolve(appDirectory, "./app/assets"),
	},

	module: {
		rules: [
			babelLoaderConfiguration,
			cssLoaderConfiguration,
			imageLoaderConfiguration,
			ttfLoaderConfiguration,
		],
	},

	plugins: [
		// process.env.NODE_ENV === 'production' must be true for production
		// builds to eliminate development checks and reduce build size. You may
		// wish to include additional optimizations.
		// https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/206#issuecomment-358015555
		new webpack.DefinePlugin({
			"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development"), //JSON.stringify("production")
			__DEV__: process.env.NODE_ENV === "production" || true,
		}),
	],

	resolve: {
		// If you're working on a multi-platform React Native app, web-specific
		// module implementations should be written in files using the extension
		// '.web.js'.
		symlinks: false,
		extensions: [".web.js", ".js", ".json"],
		alias: {
			"./assets/images/expo-icon.png": "./assets/images/expo-icon@2x.png",
			"./assets/images/slack-icon.png": "./assets/images/slack-icon@2x.png",
			"@expo/vector-icons": "expo-web",
			expo: "expo-web",
			"react-native$": "react-native-web",
			'react-native-svg$': 'react-native-web-svg',
      "babel-runtime/regenerator": require.resolve("babel-runtime/regenerator"),
		},
	},
};

感谢所有人。