2016-11-07 2 views
1

Я пытаюсь настроить конфигурацию webpack (1.13.3) для приложения React (15.3.2), и я хочу, чтобы производственная версия React в моей производственной сборке. Я нахожусь в Windows.React Webpack Ошибки в работе

Я использую это (что везде в Интернете при поиске):

new webpack.ProvidePlugin({ 
    'process.env': { 
    'NODE_ENV': JSON.stringify('production') 
    } 
}) 

Однако, как только я добавить это и запустить webpack (CLI) я получаю пощечину вокруг лица со многими много ошибок ,

Я получаю целую кучу этих предупреждений:

WARNING in ./~/fbjs/lib/partitionObject.js.flow Module parse failed: C:\node\sandbox\react-webpack\node_modules\fbjs\lib[ SOME FILE NAME HERE].flow Unexpected token (18:24) You may need an appropriate loader to handle this file type.

... и кучу этих ошибок:

ERROR in ./~/react/lib/NativeMethodsMixin.js Module not found: Error: Cannot resolve module 'react-native/lib/TextInputState' in C:\node\sandbox\react-webpack\node_modules\react\lib @ ./~/react/lib/NativeMethodsMixin.js 17:21-63

Я не использую Реагировать Native, я не знал бы, как это сделать.

Я также использую webpack.optimize.UglifyJsPlugin в своем файле webpack.config.production.js.

Когда я удалить webpack.ProvidePlugin битой сборка работает, но включает в себя разработку версию React и я получаю предупреждение в консоли:

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster.

Что это 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.production.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" 
} 

/client/index.js

import React from 'react' 
import ReactDOM from 'react-dom' 
import Hello from '../components/Hello' 
ReactDOM.render(<Hello />, document.getElementById('page')) 

/компоненты/Здравствуйте.JS

import React from 'react' 
const Hello = props => <p>Hello world...</p> 
export default Hello 

снова Задаваемые в отдельный вопрос, но с полным списком ошибок, и от React Native зрения, поскольку ошибки содержат ссылки на React Native, несмотря на то, что я не пытаюсь использовать его:

Webpack in production: Why React Native errors?

+0

Вы, кажется, все делаете правильно. Вы уверены, что не используете внешнюю библиотеку, где-то где-то зависимая? Это, кажется, проблема здесь. Можете ли вы опубликовать полную конфигурацию webpack? – Ambroos

+0

Я только что обновил свой вопрос с помощью конфигурационных файлов webpack. Он работает, никаких предупреждений и ошибок, без 'webpack.ProvidePlugin'. С помощью 'webpack.ProvidePlugin' все ошибки отображаются снова. –

+0

Просто добавил мои списки 'dependencies' тоже ... –

ответ