我正在尝试为 React (15.3.2) 应用程序设置 webpack (1.13.3) 配置,并且我希望在我的生产版本中使用 React 的生产版本。我在 Windows 上。
我正在使用这个(当你搜索时,它在网上随处可见):
new webpack.ProvidePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
但是,一旦我添加它并运行webpack
(CLI) 我因为很多错误而被打了一巴掌。
我得到了一大堆这些warnings:
./~/fbjs/lib/partitionObject.js.flow 中的警告
模块解析失败:C:\node\sandbox\react-webpack\node_modules\fbjs\lib[此处有一些文件名].flow 意外令牌 (18:24)
您可能需要适当的加载程序来处理此文件类型。
...还有一堆这样的errors:
./~/react/lib/NativeMethodsMixin.js 中出现错误
找不到模块:错误:无法解析 C:\node\sandbox\react-webpack\node_modules\react\lib 中的模块“react-native/lib/TextInputState”
@ ./~/react/lib/NativeMethodsMixin.js 17:21-63
我没有使用 React Native,我不知道如何使用。
我也在用webpack.optimize.UglifyJsPlugin
in my webpack.config.production.js
file.
当我删除webpack.ProvidePlugin
构建工作正常,但包含 React 的开发版本,我在控制台中收到警告:
警告:看起来您正在使用 React 开发版本的缩小副本。将 React 应用程序部署到生产环境时,请确保使用生产版本,它会跳过开发警告并且速度更快。
这些 webpack 错误到底是关于什么的?如何获得 React 的生产版本(也被缩小了)?
UPDATE
请求完整的 webpack 配置。我已经为此设置了一个测试应用程序,具有最低配置,并且警告和错误仍然显示:
webpack.config.js
module.exports = process.env.NODE_ENV === 'production' ? require('./webpack.config.production.js') : require('./webpack.config.development.js')
webpack.config.base.js
module.exports = {
entry: {
'bundle': './client/index.js'
},
output: {
path: './public',
filename: 'js/[name].js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: { presets: ['es2015', 'react'] }
}
]
}
}
webpack.config.development.js
var config = require('./webpack.config.base')
module.exports = config
webpack.config.生产.js
var webpack = require('webpack')
var config = require('./webpack.config.base')
config.plugins = [
new webpack.ProvidePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
include: /\.js$/,
compress: { warnings: false }
})
]
module.exports = config
我正在使用的测试应用程序仅安装了以下内容:
"dependencies": {
"express": "^4.14.0",
"react": "^15.3.2",
"react-dom": "^15.3.2"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"webpack": "^1.13.3"
}
/客户端/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import Hello from '../components/Hello'
ReactDOM.render(<Hello />, document.getElementById('page'))
/组件/Hello.js
import React from 'react'
const Hello = props => <p>Hello world...</p>
export default Hello
在一个单独的问题中再次询问,但具有完整的错误列表,并且从 React Native 视图中,因为错误包含对 React Native 的引用,即使我没有尝试使用它:
生产中的 Webpack:为什么 React Native 会出现错误? https://stackoverflow.com/questions/40469980/webpack-in-production-why-react-native-errors