Login/Register
webpack production build not working
Asked Answered
reactjswebpackproduction
D

1

6

I have no problem whatsoever working on the dev env, hot reloading and everything works fine. Trying to make a production build its proving to be quite challenging, getting nothing but a blank page. There seems to be similar questions on here but I'm not using any html as an entry point. Thanks in advance.

package.json

{
  "name": "dc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server -d --content-base public --inline --hot --host 0.0.0.0",
    "prod": "webpack -p --progress --config prod.config.js"
      },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "axios": "^0.9.1",
    "babel-core": "^6.7.2",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.7.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-react-hmre": "^1.1.1",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "history": "^2.0.1",
    "isomorphic-fetch": "^2.2.1",
    "node-sass": "^3.4.2",
    "react": "^0.14.7",
    "react-css-transition-replace": "^1.1.0",
    "react-dom": "^0.14.7",
    "react-hot-loader": "^1.3.0",
    "react-redux": "^4.4.1",
    "react-router": "^2.0.1",
    "redux": "^3.3.1",
    "redux-logger": "^2.6.1",
    "redux-thunk": "^2.0.1",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.12.14"
  },
  "dependencies": {
    "axios": "^0.9.1",     
    "history": "^2.0.1",
    "isomorphic-fetch": "^2.2.1",    
    "react": "^0.14.7",
    "react-redux": "^4.4.1",
    "react-router": "^2.0.1",
    "redux": "^3.3.1"
  }
}

production config 

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  entry : ["./app/App.js"],
  output : {
    filename: "bundle.js",
    publicPath: 'dist/',
    path : path.resolve(__dirname, 'dist/')
  },
  devtool: 'source-map',
  devServer: {
    contentBase: 'dist/'
  },
  plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"',
        },
        __DEVELOPMENT__: false,
      }),
      new webpack.optimize.OccurenceOrderPlugin(),
      new ExtractTextPlugin("styles.css"),
      new webpack.NoErrorsPlugin(),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: true,
      },
    }),
    ],
  module : {
    loaders : [
      { test : /\.jsx?$/, loader : 'babel-loader',  
        query : { 
          presets : ['react', 'es2015', 'react-hmre']
        }
      },
            { test: /\.(jpg|png)$/, exclude: /node_modules/, loader: "file?name=images/[name].[ext]"},
            { test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") },
            { test: /\.scss$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader") }
    ]
  }

};

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lol</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>
</html>
Dido answered 11/4, 2016 at 20:57 Comment(7)
How are you serving the prod bundle? What does the HTML file that includes it look like? – Calypso
added it to question – Dido
You're sure your src reference is correct? Console errors? – Actually
i get no errors during build process, not sure what you mean with the src reference. All the files get generated to the dist folder, when you open the html it loads a while but does nothing. When you see the source code you can tell its pointing to the built files – Dido
check your network tab, does bundle.js load ? – Prehistory
tweaking some stuff around I've been able to get an error related to react-transform-hmr and production env – Dido
it was that guys, just removed 'react-hmre' from the babel config. cheers for the help – Dido
A
0

I have been working with a bit different solution. What I have been doing is bundling the files through webpack then use a koa server to serve a static file and then have a npm start script which sets NODE_ENV to production. Take a look:

package.json:

{

  "name": "react",
  "version": "1.0.0",
  "description": "some description",
  "main": "index.js",
  "scripts": {
    "test": "test",
    "start": "NODE_ENV=production webpack --progress && NODE_ENV=production node server.js",
    "dev": "webpack-dev-server --progress --colors --watch",
    "build": "webpack --progress --watch"
  },
  "author": "your_name",
  "license": "ISC",
  "dependencies":{
    "babel-core": "^6.7.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "copy-webpack-plugin": "^1.1.1",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "image-webpack-loader": "^1.6.3",
    "json-loader": "^0.5.4",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.0",
    "koa": "2.0.0-alpha.3",
    "koa-convert": "1.2.0",
    "koa-static": "2.0.0",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

server.js:

'use strict';


const port = process.env.PORT || 3000;
const Koa = require('koa');
const serve = require('koa-static');
const convert = require('koa-convert');
const app = new Koa();
const _use = app.use;
app.use = (x) => _use.call(app, convert(x));
app.use(serve('./build'));

const server = app.listen(port, function () {
 let host = server.address().address;
 let port = server.address().port;
 console.log('listening at http://%s:%s', host, port);
});

and finaly webpack.config.js:

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './main.js',
  output: { path: __dirname + "/build/", filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
       test: /\.scss$/,
       loader: ExtractTextPlugin.extract("style", "css!sass?")
     },
      {
        test: /\.json$/,
        loader: "json"
      },
     {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      }
    ]
  },
  plugins: [
     new ExtractTextPlugin("main.css"),
     new CopyWebpackPlugin([
     {
       from: __dirname + '/index.html',
       to: __dirname + '/index.html'
     },
   ])
  ]
};

If you will run those with an index.html file and an main.js file rendering some react to it it will run on production :) I recently wrote an article about how exactly my solution looks like. Feel free to take a look: https://medium.com/@TheBannik/get-ready-to-deploy-a-react-js-app-8f62c8e08282#.9gcd329h6

Attachment answered 8/6, 2016 at 20:8 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.