This plugin does not work with my build!

[clementdevos]

Hey !

We're suffering from long build time and we'd like to use this plugin to see what's what.
However, i can't make it work with my build.

i'm running npm run build which runs NODE_ENV=production webpack --config config/webpack.prod.config.js -p

Our webpack.prod.config.js looks like this ...

let merge = require('webpack-merge');
let webpack = require('webpack');
let CompressionPlugin = require("compression-webpack-plugin");
let CopyWebpackPlugin = require('copy-webpack-plugin');
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
const packageJson = require('../package.json');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const smp = new SpeedMeasurePlugin();
const finalConfig = merge.smartStrategy(
    {
        plugins: 'replace', // or 'replace', defaults to 'append'
    }
)(
    require('./webpack.config'),
    {
        mode: "production",
        entry: path.resolve('./src/app.ts'),
        output: {
            filename: "build.[hash].js"
        },
        devtool: false,
        plugins: smp.wrap({
            plugins: [
                new VueLoaderPlugin(),
                new webpack.DefinePlugin({
                    'process.env.NODE_ENV': '"production"',
                    'API_URL': JSON.stringify('MOM_PROD_URL'),
                    'XAVIER_URL': `"${process.env.XAVIER_URL || "http:https://localhost:3000"}"`,
                    'FRY_VERSION': JSON.stringify(packageJson.version),
                    'FRY_BUILD_TIMESTAMP': JSON.stringify(new Date().getTime())
                }),
                new webpack.NoEmitOnErrorsPlugin(),
                new webpack.ProvidePlugin({
                    $: "jquery",
                    jQuery: "jquery",
                    "window.jQuery": "jquery"
                }),
                new CompressionPlugin({
                    asset: "[path].gz[query]",
                    algorithm: "gzip",
                    test: /\.js$/,
                    threshold: 10240,
                    minRatio: 0.8
                }),
                new CopyWebpackPlugin([
                    {
                        from: path.resolve(__dirname, '../static'),
                    }, {
                        from: path.resolve(__dirname, '../config/defaultapiconfig.js'),
                        to: 'public/config.js'
                    }
                ], {
                    copyUnmodified: true
                }),
                new HtmlWebpackPlugin({
                    title: '[you don't need to know that]',
                    filename: "index.html",
                    template: path.resolve('./config/index.ejs'),
                    inject: false
                })
            ]
        })
    }
);
console.log(JSON.stringify(finalConfig));
module.exports = finalConfig;

A console .log on the config renders this ...

   "entry":"/home/clement/workspace/[you don't need to know that]/v3/fry/src/app.ts",
   "mode":"production",
   "output":{
      "path":"/home/clement/workspace/[you don't need to know that]/v3/fry/dist",
      "filename":"build.[hash].js",
      "globalObject":"this"
   },
   "resolve":{
      "extensions":[
         ".ts",
         ".tsx",
         ".js"
      ]
   },
   "module":{
      "rules":[
         {
            "test":{

            },
            "loader":"vue-loader",
            "options":{
               "esModule":true
            }
         },
         {
            "test":{

            },
            "loader":"babel-loader",
            "exclude":{

            }
         },
         {
            "test":{

            },
            "exclude":{

            },
            "use":[
               {
                  "loader":"babel-loader"
               },
               {
                  "loader":"ts-loader",
                  "options":{
                     "appendTsSuffixTo":[
                        {

                        }
                     ]
                  }
               }
            ]
         },
         {
            "test":{

            },
            "use":[
               "style-loader",
               {
                  "loader":"css-loader",
                  "options":{
                     "minimize":{
                        "zindex":false
                     },
                     "sourceMap":true
                  }
               }
            ]
         },
         {
            "test":{

            },
            "use":[
               "style-loader",
               "vue-style-loader",
               {
                  "loader":"css-loader",
                  "options":{
                     "minimize":{
                        "zindex":false
                     }
                  }
               },
               "resolve-url-loader",
               "sass-loader?sourceMap"
            ]
         },
         {
            "test":{

            },
            "use":{
               "loader":"worker-loader",
               "options":{
                  "publicPath":"/"
               }
            }
         },
         {
            "test":{

            },
            "loader":"url-loader"
         },
         {
            "test":{

            },
            "loader":"file-loader",
            "options":{
               "name":"[hash].[ext]",
               "publicPath":"/assets",
               "outputPath":"/assets"
            }
         }
      ]
   },
   "plugins":{
      "plugins":[
         {

         },
         {
            "definitions":{
               "process.env.NODE_ENV":"\"production\"",
               "API_URL":"\"MOM_PROD_URL\"",
               "XAVIER_URL":"\"http:https://localhost:3000\"",
               "FRY_VERSION":"\"3.9.7\"",
               "FRY_BUILD_TIMESTAMP":"1539188452896"
            }
         },
         {

         },
         {
            "definitions":{
               "$":"jquery",
               "jQuery":"jquery",
               "window.jQuery":"jquery"
            }
         },
         {
            "options":{
               "asset":"[path].gz[query]",
               "test":{

               },
               "filename":false,
               "compressionOptions":{
                  "level":9
               },
               "cache":false,
               "threshold":10240,
               "minRatio":0.8,
               "deleteOriginalAssets":false
            }
         },
         {

         },
         {
            "options":{
               "template":"/home/clement/workspace/[you don't need to know that]/v3/fry/config/index.ejs",
               "filename":"index.html",
               "hash":false,
               "inject":false,
               "compile":true,
               "favicon":false,
               "minify":false,
               "cache":true,
               "showErrors":true,
               "chunks":"all",
               "excludeChunks":[

               ],
               "chunksSortMode":"auto",
               "meta":{

               },
               "title":"[you don't need to know that]",
               "xhtml":false
            }
         },
         {
            "options":{

            },
            "timeEventData":{

            },
            "smpPluginAdded":true
         }
      ]
   },
   "devtool":false
}

So the console spits this kind of error (the full stack trace is too long obviously...)

ERROR in ./src/conceptor/datasources/components/DatasourceForm.vue?vue&type=script&lang=ts& 95:8
Module parse failed: Unexpected token (95:8)
You may need an appropriate loader to handle this file type.
| import {renamePath} from "../../../common/utils/Datasources";
| 
> declare const API_URL: String;
| 
| export default {
 @ ./src/conceptor/datasources/components/DatasourceForm.vue 2:0-66 3:0-61 3:0-61 10:2-8
 @ ./src/conceptor/datasources/components/DatasourcePanel.vue?vue&type=script&lang=ts&
 @ ./src/conceptor/datasources/components/DatasourcePanel.vue
 @ ./src/components.ts
 @ ./src/app.ts

The console.log does not show everything but it seems that it should work fine.

Any idea what could go wrong?

[stephencookdev]

Hey @clementdevos - unless I'm reading your webpack config wrong, I think you're basically omitting all of your webpack plugins. Which is probably then giving you this specific error because of the lack of the VueLoaderPlugin

I might try and rewrite the docs, to make this clearer - but rather than

const finalConfig = merge.smartStrategy(
    {
        plugins: 'replace', // or 'replace', defaults to 'append'
    }
)(
    require('./webpack.config'),
    {
        ...,
        plugins: smp.wrap({
          plugins: [...]
        })
    }
)

you can instead do

const finalConfig = smp.wrap(merge.smartStrategy(
    {
        plugins: 'replace', // or 'replace', defaults to 'append'
    }
)(
    require('./webpack.config'),
    {
        ...,
        plugins: [...]
    }
))

unless you were specifically trying to only measure the plugins?

[clementdevos]

Works like a charm, thank you ! :)