Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

312
Views
How to deploy client webpack bundle to production?

I'm currently deploying an app to my digital ocean nodejs environment, it's a client-only bundle, talking to APIs. I've been using devserver for development so far, but I'm guessing this is not intended to be used for production, since my bundle is huge (1.8 MB).

This is my devserver setup:

var
    WebpackDevServer = require('webpack-dev-server'),
    webpack = require('webpack'),
    config = require('./webpack.config');

const compiler = webpack(config);
const server = new WebpackDevServer(compiler, {
    historyApiFallback: true,
    compress: true,
    inline: true,
    hot: true
});

server.listen(8000);

My webpack config:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'app.js',
  },
  devServer: {
      historyApiFallback:{
          index:'/index.html'
      },
  },
  resolveLoader: {
    modules: ['node_modules'],
  },
  module: {
    loaders: [
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file',
        query: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.html$/,
        loader: 'wc-loader'
      },
    ],
  },
  devtool: 'eval-source-map'
};

I'm now trying to reduce the bundle, I think I need to stop using devserver for that? What I have so far (with devserver but different config):

var
WebpackDevServer = require('webpack-dev-server'),
webpack = require('webpack'),
config = require('./production_webpack.config');

const compiler = webpack(config);
const server = new WebpackDevServer(compiler, {
    historyApiFallback: true,
    compress: true,
    inline: true,
    hot: true
});

server.listen(8000);

My production config:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'app.js',
    sourceMapFilename: '[name].map'
  },
  resolveLoader: {
    modules: ['node_modules'],
  },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),
    new webpack.optimize.UglifyJsPlugin({
      beautify: false,
      mangle: {
        screw_ie8: true,
        keep_fnames: true
      },
      compress: {
        screw_ie8: true
      },
      comments: false
    })
  ],
  module: {
    loaders: [
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file',
        query: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.html$/,
        loader: 'wc-loader'
      },
    ],
  },
  devtool: 'source-map'
};
over 4 years ago · Santiago Trujillo
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!