react and webpack bundle not being loaded

Question

I'm trying to understand the innings and outings of webpack and it's quirks. So i've set up a project working with webpack 1(i know it's outdated, but for now it will work for my needs), that coupled with react and redux.

While developing and testing locally it works like a charm all is good. when i try to set it to production it all goes A-wire. when i try to access the app i get a famous

Uncaught SyntaxError: Unexpected token <

While inspecting the firefox dev console and chrome dev console i see that on the sources the the html file is there, but the bundle is not.

The bundle is generated on the corresponding folder, either while in development mode, or in production mode. I've tried the adding adding a dot for relative path, removing the dot on the relative path, moving the location of the js bundle file around, setting it to async and still no solution.

Bellow are the webpack config for development and production.

Development webpack file structure

const webpack = require('webpack');
const path = require('path');
//const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: ['whatwg-fetch','./src/index.js'],
  module: {
    devtool: 'source-map',
    loaders: [
      {
        test: /\.js?$/, 
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test:/\.jsx$/, 
        loader: 'babel',
        exclude: /node_modules/,
      },
      { 
        test: /\.scss$/, 
        loader: 'style!css!sass'
       },{ 
        test: /\.css$/, 
        loader: "style-loader!css-loader" 
      },
      { 
        test: /\.png$/, 
        loader: "url-loader?limit=100000" 
      },
      { 
        test: /\.jpg$/, 
        loader: "file-loader" 
      },
      {
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
        loader: 'url?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
        loader: 'url?limit=10000&mimetype=application/octet-stream'
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
        loader: 'file'
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
        loader: 'url?limit=10000&mimetype=image/svg+xml'
      }
    ]
  },
  resolve: {
    extensions: ['', '.js','.jsx']
  },
  output: {
    path: path.join(__dirname, '/dist'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
    hot: true
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),

     /* new CleanWebpackPlugin(['dist'], {

      verbose: true, 
      dry: false,
      exclude: ['index.html','server.bundle.js','dbFactory.js','httpService.js']
    })  */


  ]
};

Webpack production file structure

const config = require('./webpack.config.js');
const webpack = require('webpack');

config.plugins.push(
  new webpack.DefinePlugin({
    "process.env": {
      "NODE_ENV": JSON.stringify("production")
    }
  })
);

config.plugins.push(
  new webpack.optimize.UglifyJsPlugin({
    comments:false,
    minimize:true,
    mangle:true,
    compress: {
      warnings: false,
      sequences: true,
      dead_code: true,
      conditionals: true,
      booleans: true,
      unused: true,
      if_return: true,
      join_vars: true,
      drop_console: true,
      screw_ie8: true, 
    }
  })
);

config.plugins.push(
  new webpack.optimize.DedupePlugin()
);
/*
config.plugins.push(
  new webpack.optimize.CommonsChunkPlugin({
      name:'vendor',
      entries:['history',
                'react',
                'react-dom',
                'react-router',
                'react-redux',
                'redux'],
      chunks:['vendor'],
      minChunks:Infinity
    })
);*/
module.exports = config;

The package.json command to generate the bundle is the following one

"postinstall": "webpack -p --config webpack.prod.config.js --progress --colors"

react and webpack bundle not being loaded

Answers (1)

Related Questions