Middleman 4 and Webpack 3 integration. Use Middleman with External Pipeline.

config.rb

# ...
  
activate :external_pipeline,
  name: :webpack,
  command: build? ? "npm run build:assets" : "npm run start:assets",
  source: ".tmp/webpack_output",
  latency: 1

# ...

package.json

// ...

  "scripts": {
    "test": "mocha --require test/helpers/dom.js --compilers js:babel-core/register",
    "build:assets": "NODE_ENV=production webpack -p --config webpack.prod.config.js",
    "build": "bundle exec middleman build",
    "start:assets": "NODE_ENV=development webpack --watch --config webpack.dev.config.js",
    "start": "bundle exec middleman server"
  },
  "babel": {
    "presets": [
      "es2015"
    ]
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.26.0",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.5",
    "extract-text-webpack-plugin": "^3.0.0",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.6",
    "sass-loader": "^6.0.6",
    "sinon": "^3.2.1",
    "style-loader": "^0.18.2",
    "webpack": "^3.5.5"
  }
// ...

webpack.dev.config.js

const path = require('path');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: {
    all: path.join(__dirname, '/source/javascripts/index.js')
  },
  output: {
    path: path.join(__dirname, '.tmp/webpack_output'),
    filename: 'javascripts/[name].js'
  },
  resolve: {
    modules: [
      path.join(__dirname, 'source'),
      'node_modules'
    ]
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          { loader: 'style-loader', options: { sourceMap: true } },
          { loader: 'css-loader', options: { sourceMap: true } },
          { loader: 'postcss-loader', options: { sourceMap: true } },
          { loader: 'sass-loader', options: { sourceMap: true } }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: ['babel-loader']
      }
    ]
  }
};

webpack.prod.config.js

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: {
    all: path.join(__dirname, '/source/javascripts/index.js')
  },
  output: {
    path: path.join(__dirname, '.tmp/webpack_output'),
    filename: 'javascripts/[name].js'
  },
  resolve: {
    modules: [
      path.join(__dirname, 'source'),
      'node_modules'
    ]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }, {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              query: {
                modules: false,
                sourceMaps: true
              }
            }, {
              loader: 'postcss-loader',
              query: {
                sourceMaps: true
              }
            }, {
              loader: 'sass-loader',
              query: {
                sourceMaps: true
              }
            }
          ]
        })
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
    new ExtractTextPlugin({ filename: 'css/app.css' })
  ]
};