Blue configuration

Blue comes with a zero configuration principle that allows the developer to start coding immediately without wasting time looking for webpack loaders, plugins and tricks to compile a small bundle.

Obviously it's always possible to tweak the current project so that it can fits different needs.

The blue.config.js file is the glue between the project and the logic behind it.

Webpack

To be able to change the webpack configuration, Blue uses a proxy pattern which allows the developer to change that object before it goes into the webpack compiler.

It is possible to direct mutate the configuration just adding the webpack method in the root of the blue.config.js file.

In this example we want to change the output path of the build folder

module.exports = {
  name: 'my-project',

  webpack: function (webpackConfig) {
    webpackConfig.output.path = 'path/to/another/folder'
  }
}

It is also possible to add changes only for production or development

module.exports = {
  name: 'my-project',

  production: {
    webpack: function (webpackConfig) {
      webpackConfig.output.path = 'path/to/another/folder'
    }
  }
}

Webpack helpers

Some parts of the webpack configuration are more complicated to modify, like plugins and module rules, so we can use some built-in webpack helpers.

A webpack helper basically transforms the array to an object map, which makes accessing configuration parameters way easier, and then is transforms it back to array before it goes into the compiler.

In this example we change the name of the manifest.json file in production and the way we create hashed classes names in for both environments.

module.exports = {
  name: 'my-project',

  webpackHelper: {
    rules: function ({ map, array }) {
      map.vue.options.cssModules.localIdentName = 'example_[hash:3]_[name]'
      return map
    }
  },

  production: {
    webpackHelper: {
      plugins: function ({ map }) {
        map.ManifestPlugin.opts.fileName = 'foo.json'
        return map
      }
    }
  }
}