Wednesday 26 April 2017

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'
};



via Andreas Galster

No comments:

Post a Comment