Customizing webpackMonitor in nuxt.config.js has no effect

[Hellowor1d]

framework template: nuxt-express

example: nuxt.config.js:

// nuxt.config.js
module.exports = {
...
  webpackMonitor : {
    capture: true, // -> default 'true'
    target: '~/.monitor/stats.json', // default -> '../monitor/stats.json'
    launch: true, // -> default 'false'
    port: 4444, // default -> 8081
    excludeSourceMaps: true // default 'true'
  },
...
}

npx nuxt build --webpackmonitor

then the port was still 8085, and the server of webpack monitor closed automatically itself.

Webpack-Monitor is running on port 8085!
Press ctrl C to exit
Hash: 6b4274d164104b282cf9
Version: webpack 3.10.0
Time: 14708ms
             Asset     Size  Chunks             Chunk Names
server-bundle.json  1.74 MB          [emitted]
  nuxt:build Building done +1m

_{This question is available on Nuxt.js community (#c2)}

[David-Mueller]

Hi there,

try passing the options like this within nuxt.config.js:

  modules: [
    [
      '@nuxtjs/webpackmonitor',
      {
        capture: true, // -> default 'true'
        target: '~.monitor/stats.json', // default -> '../monitor/stats.json'
        launch: true, // -> default 'false'
        port: 4444, // default -> 8081
        excludeSourceMaps: true // default 'true'
      }
    ],
    '@nuxtjs/anothermodule'
  ],

and try setting the analyze build option to keep the nuxt build from terminating via yarn nuxt build --webpackmonitor --analyze or nuxt.config.js.

Good luck!

[azulkipli]

@David-Mueller

I tried yarn generate --webpackmonitor --analyze but still got this warning

Here my nuxt.config.js

export default {
  mode: 'spa',
  /*
   ** Headers of the page
   */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || ''
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },
  /*
   ** Customize the progress-bar color
   */
  loading: { color: '#fff' },
  /*
   ** Global CSS
   */
  css: ['tachyons/css/tachyons.css'],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    'nuxt-purgecss',
    '@nuxtjs/pwa',
    [
      '@nuxtjs/webpackmonitor',
      {
        capture: true, // -> default 'true'
        target: '~.monitor/stats.json', // default -> '../monitor/stats.json'
        launch: true, // -> default 'false'
        port: 4444, // default -> 8081
        excludeSourceMaps: true // default 'true'
      }
    ]
  ],
  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {
    proxyHeadres: false
  },
  // render option
  render: {
    bundleRenderer: {
      shouldPrefetch: (file, type) => ['script', 'style', 'font'].includes(type)
    }
  },
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    // extractCSS: true,
    optimizeCSS: true,
    optimization: {
      splitChunks: {
        name: true,
        chunks: 'all'
      }
    },
    extend(config, ctx) {}
  },
  purgeCSS: {
    mode: 'webpack',
    enabled: ({ isDev, isClient }) => !isDev && isClient, // or `false` when in dev/debug mode
    paths: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js'
    ],
    styleExtensions: ['.css'],
    whitelist: ['body', 'html', 'nuxt-progress'],
    extractors: [
      {
        extractor: class {
          static extract(content) {
            return content.match(/[A-z0-9-:\\/]+/g)
          }
        },
        extensions: ['html', 'vue', 'js']
      }
    ]
  }
}

And this is my package.json

{
  "name": "rusuxt-tachyons",
  "version": "1.0.0",
  "description": "nuxtjs with tachyons",
  "author": "azulkipli",
  "private": true,
  "scripts": {
    "test": "jest",
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.5.4",
    "@nuxtjs/pwa": "^3.0.0-beta.16",
    "@nuxtjs/webpackmonitor": "^0.1.0",
    "nuxt": "^2.8.1",
    "tachyons": "^4.11.1"
  },
  "devDependencies": {
    "@vue/test-utils": "^1.0.0-beta.27",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^24.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-prettier": "^3.0.1",
    "jest": "^24.1.0",
    "nodemon": "^1.18.9",
    "nuxt-purgecss": "^0.2.1",
    "prettier": "^1.16.4",
    "vue-jest": "^3.0.3"
  }
}