3
Mein Code funktioniert wie erwartet, wenn ich webpack mit meiner dev-Konfigurationsdatei verwende. Aber mit der Produktion bekomme ich diesen Fehler beim Laden der resultierenden Build im Browser. Dieser Fehler tritt in RouterUtils von react-router auf, der von redux-router aufgerufen wird.React production build: Eigenschaft 'lifeBeforeLeavingRoute' von undefined kann nicht gelesen werden
Wie Sie erraten können, bin ich ziemlich neu mit Webpack, und reagieren Dinge.
Produktionsdatei:
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
// App files location
const PATHS = {
app: path.resolve(__dirname, '../src/js'),
styles: path.resolve(__dirname, '../src/styles'),
images: path.resolve(__dirname, '../src/images'),
build: path.resolve(__dirname, '../build')
};
const plugins = [
new CopyWebpackPlugin([
{
from: PATHS.images,
to: 'images'
}
]),
// Shared code
new webpack.optimize.CommonsChunkPlugin('vendor', 'js/vendor.bundle.js'),
// Avoid publishing files when compilation fails
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
// This plugin moves all the CSS into a separate stylesheet
new ExtractTextPlugin('css/app.css', { allChunks: true })
];
const sassLoaders = [
'css-loader?sourceMap',
'postcss-loader',
'sass-loader?outputStyle=compressed'
];
module.exports = {
entry: {
app: path.resolve(PATHS.app, 'main.js'),
vendor: ['react']
},
output: {
path: PATHS.build,
filename: 'js/[name].js',
publicPath: '/'
},
stats: {
colors: true
},
resolve: {
// We can now require('file') instead of require('file.jsx')
extensions: ['', '.js', '.jsx', '.scss', '.css'],
alias: {
'rc-time-picker/assets/index.css': path.resolve('./node_modules/rc-time-picker/assets/index.css'),
'emojione-picker/css/picker.css': path.resolve('./node_modules/emojione-picker/css/picker.css'),
'react-mapbox-gl/dist/mapbox-css/mapbox-gl.css': path.resolve('./node_modules/react-mapbox-gl/dist/mapbox-css/mapbox-gl.css')
}
},
externals: {
'layer-sdk': 'layer'
},
module: {
noParse: /\.min\.js$/,
loaders: [
{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel'],
include: PATHS.app
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
},
// Inline base64 URLs for <=8k images, direct URLs for the rest
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
loader: 'url-loader?limit=8192&name=images/[name].[ext]?[hash]'
},
{
test: /\.(woff|woff2)$/,
loader: 'url-loader?limit=8192&name=fonts/[name].[ext]?[hash]'
}
]
},
plugins: plugins,
postcss: function() {
return [autoprefixer({
browsers: ['last 2 versions']
})];
},
devtool: 'source-map'
};
Entwicklungs Datei:
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
// App files location
const PATHS = {
app: path.resolve(__dirname, '../src/js'),
styles: path.resolve(__dirname, '../src/styles'),
build: path.resolve(__dirname, '../build')
};
const plugins = [
// Shared code
new webpack.optimize.CommonsChunkPlugin('vendor', 'js/vendor.bundle.js'),
// Avoid publishing files when compilation fails
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
}),
new webpack.optimize.OccurenceOrderPlugin()
];
const sassLoaders = [
'style-loader',
'css-loader?sourceMap',
'postcss-loader',
'sass-loader?outputStyle=expanded'
];
module.exports = {
env : process.env.NODE_ENV,
entry: {
app: path.resolve(PATHS.app, 'main.js'),
vendor: ['react']
},
output: {
path: PATHS.build,
filename: 'js/[name].js',
publicPath: '/'
},
stats: {
colors: true,
reasons: true
},
resolve: {
// We can now require('file') instead of require('file.jsx')
extensions: ['', '.js', '.jsx', '.scss']
},
externals: {
'layer-sdk': 'layer'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel'],
include: PATHS.app
},
{
test: /\.scss$/,
loader: sassLoaders.join('!')
},
{
test: /\.css$/,
loader: 'style-loader!css-loader!postcss-loader'
},
// Inline base64 URLs for <=8k images, direct URLs for the rest
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader?limit=8192'
}
]
},
plugins: plugins,
postcss: function() {
return [autoprefixer({
browsers: ['last 2 versions']
})];
},
devServer: {
contentBase: path.resolve(__dirname, '../src'),
port: 3000
},
devtool: 'eval'
};