Nothing is displayed in terminal

[bevrard]

Hi,
I'm trying to use the plugin but it doesn't seem to work with my current configuration.

Environment:
Windows 7
Node: 6.9.1
NPM: 3.10.8
Webpack: 3.10.0

webpack.config.js

/**
 * Identify the environment
 */

const DEV = "dev";
const TEST = "test";
const PROD = "prod";

var isDev = process.env.NODE_ENV === DEV;
var isTest = process.env.NODE_ENV === TEST;
var isProd = process.env.NODE_ENV === PROD;

if (typeof process.env.NODE_ENV === 'undefined') {
  console.log("ERROR: The NODE_ENV environment variable is not defined.");
  console.log("       This environment variable is needed to run this program.");
  console.log("       The value should be either '" + DEV + "' or '" + TEST + "' or '" + PROD + "'.");
  process.exit(-1);
}

if (!isDev && !isTest && !isProd) {
  console.log("ERROR: The NODE_ENV environment variable is not defined correctly.");
  console.log("       The current value is '" + process.env.NODE_ENV + "' (should be either '" + DEV + "' or '" + TEST + "' or '" + PROD + "').");
  process.exit(-1);
}
else {
  console.log("The NODE_ENV environment variable is " + process.env.NODE_ENV);
}
var SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const smp = new SpeedMeasurePlugin();
// Look in ./config folder for webpack.dev.js
module.exports = smp.wrap(require('./config/webpack.' + process.env.NODE_ENV + '.js'));

And my dev configuration:

/**
 * Webpack Constants
 */
const BRANCH_GUI_PROPERTIES = {
  scheme: 'http',
  host: 'localhost',
  port: '8080'
};

/**
 * Imports
 */
var webpack = require('webpack');
var helpers = require('./helpers');

/**
 * Webpack Plugins
 */
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var HardSourceWebpackPlugin = require('hard-source-webpack-plugin');



/**
 * Get invoked task
 */
var isBuilding = process.env.npm_lifecycle_event === 'build';

/**
 * Webpack configuration
 *
 * See: http:https://webpack.github.io/docs/configuration.html#cli
 */

module.exports = {

  // Developer tool to enhance debugging
  //
  // See: http:https://webpack.github.io/docs/configuration.html#devtool
  // See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
  devtool:'cheap-module-eval-source-map',

  // Cache generated modules and chunks to improve performance for multiple incremental builds.
  // This is enabled by default in watch mode.
  // You can pass false to disable it.
  //
  // See: http:https://webpack.github.io/docs/configuration.html#cache
  cache: true,

  // The entry point for the bundle
  // Our Angular.js app
  //
  // See: http:https://webpack.github.io/docs/configuration.html#entry
  entry: {
    'polyfills': './config/polyfills.ts',
    'environment': './config/environment.dev.js',

    'vendor': './config/vendor.dev.ts',
    'app': './src/bootstrap/dev.bootstrap.ts' // our angular app
  },

  // Options affecting the resolving of modules.
  //
  // See: http:https://webpack.github.io/docs/configuration.html#resolve
  resolve: {

    modules: [helpers.root('src'), helpers.root('node_modules'), helpers.root('libs')],

    // An array of extensions that should be used to resolve modules.
    //
    // See: http:https://webpack.github.io/docs/configuration.html#resolve-extensions
    extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html'],
//      'pdf-designer': helpers.root('libs/pdf-designer/index.js'),


    alias: {
      'app': 'src/app',
      'common': 'src/common',
      'moment':'moment/moment.js',
      'file-saver':'file-saver/FileSaver.js',
      'jspdf': 'jspdf/dist/jspdf.min.js',
      'pdfjs': 'pdfjs-dist/build/pdf.js',
      'pdfViewer' : 'pdfjs-dist/web/pdf_viewer',
      'pdf-designer': 'pdf-designer/index.js',
      'socket.io-client':'socket.io-client/dist/socket.io.js',
      'uuid-random':'uuid-random/uuid-random.min.js',
      'xlsx':'xlsx/xlsx.js',
    }
  },

  // Options affecting the output of the compilation.
  //
  // See: http:https://webpack.github.io/docs/configuration.html#output
  output: {

    // The output directory as absolute path (required).
    //
    // See: http:https://webpack.github.io/docs/configuration.html#output-path
    path: helpers.root('dist'),

    // test
    pathinfo: true,

    publicPath: isBuilding ? '' : BRANCH_GUI_PROPERTIES.scheme + ':https://' + BRANCH_GUI_PROPERTIES.host + ':' + BRANCH_GUI_PROPERTIES.port + '/',

    // Specifies the name of each output file on disk.
    // IMPORTANT: You must not specify an absolute path here!
    //
    // See: http:https://webpack.github.io/docs/configuration.html#output-filename
    filename: 'js/[name].js',

    // The filename of non-entry chunks as relative path
    // inside the output.path directory.
    //
    // See: http:https://webpack.github.io/docs/configuration.html#output-chunkfilename
    chunkFilename: '[id].chunk.js'

  },

  // Options affecting the normal modules.
  //
  // See: http:https://webpack.github.io/docs/configuration.html#module
  module: {

    // An array of applied pre and post loaders.
    //
    // See: http:https://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders

    // An array of automatically applied loaders.
    //
    // IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
    // This means they are not resolved relative to the configuration file.
    //
    // See: http:https://webpack.github.io/docs/configuration.html#module-loaders
    rules: [
      // Support for .ts files.
      /*{
        test: /\.ts$/,
        enforce: 'pre',
        loader: 'tslint-loader'
      },*/
      {
        test: /\.ts$/,
        use: ['awesome-typescript-loader', 'angular2-template-loader', 'angular2-router-loader', '@angularclass/hmr-loader'],
        exclude: /node_modules/
      },

      // copy those assets to output
      {test: /\.png|\.jpe?g|\.gif|\.svg|\.woff|\.woff2|\.ttf|\.eot|\.ico|\.svg$/, loader: 'file-loader?name=fonts/[name].[hash].[ext]?'},

      // Support for *.json files.
      {test: /\.json$/, loader: 'json-loader'},

      // Support for CSS as raw text
      // use 'null' loader in test mode (https://github.com/webpack/null-loader)
      // all css in src/style will be bundled in an external css file
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader']})
      },
      // all css required in src/app files will be merged in js files
      {test: /\.css$/, include: helpers.root('src', 'app'), loader: 'raw-loader!postcss-loader'},

      // support for .scss files
      // use 'null' loader in test mode (https://github.com/webpack/null-loader)
      // all css in src/style will be bundled in an external css file
      {
        test: /\.scss$/,
        exclude: helpers.root('src', 'app'),
        loader: ['extracted-loader'].concat(ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader','sass-loader'], publicPath: '../'}))
      },
      // all css required in src/app files will be merged in js files
      {test: /\.scss$/, exclude: helpers.root('src', 'style'), loader: 'raw-loader!postcss-loader!sass-loader'},

      // support for .html as raw text
      // todo: change the loader to something that adds a hash to images
      {test: /\.html$/, loader: 'raw-loader'}

    ],


    noParse: [/.+zone\.js\/dist\/.+/, /.+angular2\/bundles\/.+/, /angular2-polyfills\.js/,
      /.+@angular\/animations\/bundles\/.+/,
      /.+@angular\/common\/bundles\/.+/,
      /.+@angular\/compiler\/bundles\/.+/,
      /.+@angular\/compiler-cli\/bundles\/.+/,
      /.+@angular\/core\/bundles\/.+/,
      /.+@angular\/forms\/bundles\/.+/,
      /.+@angular\/http\/bundles\/.+/,
      /.+@angular\/platform-browser\/bundles\/.+/,
      /.+@angular\/platform-browser-dynamic\/bundles\/.+/,
      /.+@angular\/platform-server\/bundles\/.+/,
      /.+@angular\/router\/bundles\/.+/,
      /.+pdfjs-dist\/build\/.+/,
      /.+jspdf\/dist\/.+/,
      /.+moment\/.+/,
      /.+socket-io-client\/dist\/.+/,
      /.+rxjs\/bundles\/.+/]

  },

  // Add additional plugins to the compiler.
  //
  // See: http:https://webpack.github.io/docs/configuration.html#plugins
  plugins: ( function() {

    var plugins = [];

    plugins.push(
      // Generate common chunks if necessary
      // Reference: https://webpack.github.io/docs/code-splitting.html
      // Reference: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
      new CommonsChunkPlugin({
        name: ['vendor', 'polyfills', 'environment']
      })
    );

       // Tslint configuration for webpack 2
    plugins.push(new webpack.LoaderOptionsPlugin({
      options: {
        resolve: {
          extensions: ['.ts', '.tsx', '.js']
        },
        /**
         * Apply the tslint loader as pre/postLoader
         * Reference: https://github.com/wbuchwalter/tslint-loader
         */
        ts : {
          'ignoreDiagnostics': [
            2403, // 2403 -> Subsequent variable declarations
            2300, // 2300 -> Duplicate identifier
            2374, // 2374 -> Duplicate number index signature
            2375, // 2375 -> Duplicate string index signature
            2502  // 2502 -> Referenced directly or indirectly
          ]
        },
        /*tslint: {
          emitErrors: false,
          failOnHint: false
        },*/
        /**
         * Sass
         * Reference: https://github.com/jtangelder/sass-loader
         * Transforms .scss files to .css
         */
        sassLoader: {
          //includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")]
        },
        /**
         * PostCSS
         * Reference: https://github.com/postcss/autoprefixer-core
         * Add vendor prefixes to your css
         */
        postcss: [
          autoprefixer({
            browsers: ['last 2 version']
          })
        ]
      }
    }));

    plugins.push(
      // Adding Moment
      new webpack.ProvidePlugin({
        moment: 'moment'
      })
    );

    plugins.push(
      // Adding Moment
      new webpack.ProvidePlugin({
        'file-saver': 'file-saver'
      })
    );

    plugins.push(
      // Adding Moment
      new webpack.ProvidePlugin({
        'pdf-designer': 'pdf-designer'
      })
    );

    plugins.push(
      // Adding jspdf
      new webpack.ProvidePlugin({
        'jspdf': 'jspdf'
      })
    );

    plugins.push(
      // Adding uuid-random
      new webpack.ProvidePlugin({
        'socket.io-client': 'socket.io-client'
      })
    );

    plugins.push(
      // Adding uuid-random
      new webpack.ProvidePlugin({
        'uuid-random': 'uuid-random'
      })
    );

    plugins.push(
      new webpack.DefinePlugin({
        'process.env': {
          'NODE_ENV': JSON.stringify('dev')
        }
      })
    );

    plugins.push(
      // Adding uuid-random
      new webpack.ProvidePlugin({
        'xlsx': 'xlsx'
      })
    );

    plugins.push(
      // Inject script and link tags into html files
      // Reference: https://github.com/ampedandwired/html-webpack-plugin
      new HtmlWebpackPlugin({
        template: './src/public/index.html',
        inject: 'body',
        chunksSortMode: 'dependency',
        cache: true
      })
    );

    plugins.push(
      // Extract css files
      // Reference: https://github.com/webpack/extract-text-webpack-plugin
      // Disabled when in test mode or not in build mode
      new ExtractTextPlugin('css/[name].css', {
        disable: true
      })
    );

    plugins.push(
      // Copy assets from the public folder
      // Reference: https://github.com/kevlened/copy-webpack-plugin
      new CopyWebpackPlugin([{
        from: helpers.root('config/environment.dev.js'),
        to: './environment.js'
      }])
    );

    plugins.push(
      // Copy assets from the public folder
      // Reference: https://github.com/kevlened/copy-webpack-plugin
      new HardSourceWebpackPlugin()
    );

    return plugins;

  }()),

  // Webpack Development Server configuration
  // Description: The webpack-dev-server is a little node.js Express server.
  // The server emits information about the compilation state to the client,
  // which reacts to those events.
  //
  // See: https://webpack.github.io/docs/webpack-dev-server.html
  devServer: {
    host: BRANCH_GUI_PROPERTIES.host,
    port: parseInt(BRANCH_GUI_PROPERTIES.port),
    inline: true,
    contentBase: './src/public',
    historyApiFallback: true,
    //stats: 'minimal' // none (or false), errors-only, minimal, normal (or true) and verbose
    stats: {
      colors: true,
      hash: false,
      version: false,
      timings: true,
      assets: false,
      chunks: false,
      modules: false,
      reasons: false,
      children: false,
      source: false,
      errors: true,
      errorDetails: false,
      warnings: false,
      publicPath: false
    }
  }
};

I cannot get your plugin stats with a npm run build or npm run start:hmr (webpack-dev-server).

Any idea what I'm missing?
Thanks in advance!

[stephencookdev]

Hey Benjamin :) Thanks for raising an issue

There's nothing immediately obvious from your config about what's going wrong. I've not explicitly tested on a Windows machine before, so possibly that is the issue...

Could you try specifying an outputTarget to get the logs to output into a particular file? And let me know if either (a) the file is there all okay, (b) the file is there but empty, (c) the file isn't there at all, or (d) something blows up?

And is your project online at all, for me to check out locally to give a run and see what's what?

[bevrard]

I don't understand why but it works after restarting my computer. Sorry for this "issue".

Now that I see the report, is it possible to detail the general output time?

 SMP  ⏱
General output time took 5.11 secs

 SMP  ⏱  Plugins
HtmlWebpackPlugin took 0.305 secs
Object took 0.059 secs
CommonsChunkPlugin took 0.003 secs
LoaderOptionsPlugin took 0 secs
ProvidePlugin took 0 secs
DefinePlugin took 0 secs

 SMP  ⏱  Loaders
C:\j\w\i\fbranch\fbranch-gui-webapp-axa\node_modules\css-loader\index.js, and
C:\j\w\i\fbranch\fbranch-gui-webapp-axa\node_modules\postcss-loader\index.js, and
C:\j\w\i\fbranch\fbranch-gui-webapp-axa\node_modules\sass-loader\lib\loader.js took 2.24 secs
  module count = 1

[stephencookdev]

np :) by "output time" do you mean the time that it takes for any file writing to happen? If so, it's on the backlog of things to look at as soon as I get time!

[bevrard]

Ok :)
Thanks Stephen for your feedback and your great plugin! :)