babel / babel/babel-loader

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

Open
#783 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
4.8k
Forks
456
Avg merge
9h 19m
Merged PRs (30d)
2

Description

This is my webpack version

"Webpack" : "^ 4.29.6",

"Webpack - cli" : "^ 3.3.0",

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

package.json
```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
```json
{
"presets": [
"es2015",
"react",
"react-native",
"transform-es2015-spread",
[
"env",
{
"modules": "commonjs",
"targets": {
"browsers": [
"> 0.6% in CN"
]
}
}
],
"react",
"react-native"
]
}
```

webpack.config.js
```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']
}
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.