Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

316
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda