Implement in existing code base.

[Triyugi]

I have a well developed code base working with webpack. But now I want to insert express in it. I am trying to use this boilerplate but without success.

How can I configure express with my existing webpack? webpack.config.js is as follows:

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});
var entry, jsLoaders, plugins, cssLoaders, devtool;
cssLoaders = ['style-loader', 'css-loader', 'postcss-loader'];
module.exports = {
  context: __dirname,
  devtool: 'inline-source-map',
  entry: [
    './app/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: "/index_bundle.js"
  },
  devServer: {

      port: "80", 

      historyApiFallback: true
  }, 
  resolve: {
    extensions: ['', '.scss', '.css', '.js', '.json'],
    modulesDirectories: [
      'node_modules',
      path.resolve(__dirname, './node_modules')
    ]
  },
  module: {
    loaders: [
      {
        test: /(\.js|\.jsx)$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: { presets: ['es2015', 'react'] }
      }, {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass')
      },
      {
          test:   /\.css$/, // Transform all .css files required somewhere within an entry point...
          loaders: cssLoaders,
            exclude: /flexboxgrid/        // ...with PostCSS
        },
        {
  test: /\.css$/,
  loader: 'style!css?modules',
  include: /flexboxgrid/,
}, 
{test: /\.less$/, loader: "style-loader!css-loader!less-loader"},
        {
          test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
          loader: "url-loader?limit=10000"
        },
        { 
            test: /\.(ttf|eot|svg|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
            loader: "file-loader" 
        },
         {test: /\.json$/, loader: "json-loader"}
    ]
  },
  postcss: [autoprefixer],
  sassLoader: {
    includePaths: [path.resolve(__dirname, './app')]
  },
  plugins: [
   new ExtractTextPlugin('/bundle.css', { allChunks: true }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    HTMLWebpackPluginConfig,
    new webpack.DefinePlugin({
      // A common mistake is not stringifying the "production" string.
      'process.env.NODE_ENV': JSON.stringify('production')
    }) 
]};

[christianalfoni]

there are two different approaches to this:

1. Use proxy config in webpack in combination with webpack-dev-server, which will put your development server between your client code and your express dev server (Requires firing up two dev processes)

2. Use webpack-dev-middleware directly in your express app (just fire up your express server as normal)

:)

[Triyugi]

@christianalfoni Thanks for replying. I am getting Uncaught SyntaxError: Unexpected token < error in index_bundle.js. I have a question here at stackoverflow.

[Triyugi]

This issue is resolved.