7

i have a problem with a webpack build, the command i run is

cross-env NODE_ENV=production webpack --config webpack.prod.js

and the file webpack prod is:

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var path = require('path');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, {
  devtool: 'source-map',

  output: {
    path: path.join(process.cwd(), '/public'),
    publicPath: '/',
    filename: '[name].[hash].js'
},

plugins: [
    //new webpack.NoErrorsPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
        mangle: {
            keep_fnames: true,
            except: ['$super']
        }
    }),
    new ExtractTextPlugin('[name].[hash].css'),
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('production')
        }
    })
  ]
});

webpack.common.js is

var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var pkgBower = require('./package.json');

module.exports = {

entry: {
  'app': './main.js'
},

resolve: {
  root: path.join(__dirname, ''),
  modulesDirectories: ['node_modules', 'bower_components'],
  extensions: ['', '.js', '.jsx']
},

module: {
  loaders: [...]
},

devServer: {
  outputPath: path.join(__dirname, 'public')
},

plugins: [
  new HtmlWebpackPlugin({
      template: process.env.NODE_ENV == 'development' ? 'index.html' : 'index.prod.html',
      baseUrl: process.env.NODE_ENV == 'development' ? '/' : '/'
  })      
  ]
};

i can run the build but unfortunatelly when i open index.html it shows a blank page to me, i want to include this SPA in a spring boot project but I do not know how ;)

Thanks!

3 Answers 3

15

Solved! was a problem of "browserHistory"

If you use the "browserHistory" as history manager your webpack needs a node.js server to run, using a "hashHistory" you can use it as a normal web page!

See Why is React Webpack production build showing Blank page?

1

First things first, which version of webpack are you using Lorenzo? Probably due to syntax, it's 1.X.

First, check in your package.json file which version is. Then, if it's really 1.x you can build in debug mode.

export default {
    entry: [
        './src/Client.js'
    ],
    debug: true
}

Inside your webpack.common.js

Check the error, paste here.

I hope it helps, welcome to StackOverflow, here are a few notes that can improve our community =)

3
  • Hi Yuri, i am using the version 1.14 Jul 31, 2017 at 19:27
  • enable debug mode then. Jul 31, 2017 at 19:32
  • I changed my webpack.common like this module.exports = { entry: { 'app': './main.js', }, debug:true, } And i did not catch any error Jul 31, 2017 at 19:41
0

Try to put "main":"index.js" in package.json file That solved my problem.

  "main": "index.js",

  "scripts": {
    ...
  },

Happy to help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.