title: Webpack dev server: Hook or mechanism for trigger command once that the server is running
body: <p>In my development workflow I open 2 terminal windows for running in one my <code>npm start task</code>, once that the server is running at the second window I run a cucumberjs's functional test suite and this worked as i expected. But my problem is that in my CI environment I need run this in a single process. I've been trying this:</p>
  
  <p><code>npm start | cucumberjs --require test/functional/ --compiler js:babel-register test/functional/</code></p>
  
  <p>The problem with this is the task npm start take a while for run and at the same time the cucumber task try to access to <strong>localhost:3000</strong> (the url when the webpack-dev-server runs) but the server isn't ready yet and the tests fail.</p>
  
  <p><strong>So, How can I deal with this?</strong></p>
  
  <p><strong>The project:</strong> <a href="https://github.com/gpincheiraa/angularjs-tdd-jest/tree/dev" rel="nofollow noreferrer">https://github.com/gpincheiraa/angularjs-tdd-jest/tree/dev</a></p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>  ...
  
    "scripts": {
      "start": "npm run stubs &amp; webpack-dev-server",
      "dev": "npm start -- --open",
      "stubs": "stubby -w -d stubs/fakeserver.yml -s 5000",
      "tdd": "cross-env NODE_PATH=./src jest --watch --verbose",
      "test": "cross-env NODE_PATH=./src jest --coverage --verbose",
      "test:functional": "cucumberjs --require test/functional/ --compiler js:babel-register test/functional/",
      //I want in the test:functional-ci task run the npm start and once that is serving the project, run npm run test:functional task
      "test:functional-ci": "cross-env NODE_ENV=staging npm run test:functional",
      "test-debug": "cross-env NODE_PATH=./src node --inspect --inspect-brk node_modules/.bin/jest -i",
      "build": "webpack",
      "check-coverage": "npm test | http-server -so -p 9000 coverage/lcov-report"
    },
  
    ...
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>module.exports = {
      entry: [
        'core-js/shim',
        'babel-polyfill',
        'angular',
        './src/index.js'
      ],
      output: {
          path: 'dist',
          filename: 'index.bundle.js'
      },
      module: {
          loaders: [
          { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
          { test: /\.css$/, loader: 'style-loader!css-loader' },
          { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
          { test: /\.(html)$/, loader: 'html-loader' },
          { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&amp;limit=5000" },
          { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&amp;mimetype=application/octet-stream" },
          { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&amp;mimetype=image/svg+xml" }]
      },
      cache: true,
      devtool: 'eval-source-map',
      devServer: {
          filename: "index.bundle.js",
          contentBase: "./src",
          port: 3000,
          watch: true,
          publicPath: "/",
          historyApiFallback: true,
          stats: {
              colors: true,
              chunks: false
          }
      }
  };
  </code></pre>