Skip to content

Latest commit

 

History

History
109 lines (78 loc) · 2.35 KB

File metadata and controls

109 lines (78 loc) · 2.35 KB

@gasket/plugin-webpack

Adds Webpack support to your application.

Installation

npm i @gasket/plugin-webpack

Update your gasket file plugin configuration:

// gasket.js

+ import pluginWebpack from '@gasket/plugin-webpack';

export default makeGasket({
  plugins: [
+   pluginWebpack
  ]
});

Configuration

The Webpack plugin is configured using the gasket.js file.

First, add it to the plugins section of your gasket.js:

export default makeGasket({
  plugins: {
    pluginWebpack
  }
});

If your app was previously using the webpack property in the gasket.js, then you should take steps [migrating to webpackConfig] lifecycle.

Actions

getWebpackConfig

This action can be used by plugins that need to gather Webpack configuration.

// Any starting Webpack configuration
const initialConfig = { };

// Any additional context such as isServer or not
const context = { isServer: true };

const webpackConfig = gasket.actions.getWebpackConfig(initialConfig, context);

This action will execute the webpackConfig lifecycle and return the final Webpack configuration object.

Lifecycles

webpackConfig

Executed by getWebpackConfig action, it receives three parameters:

  1. The Gasket API
  2. A Webpack config object
  3. A context object with the following properties:
    • webpack - The Webpack API.
    • ...additionalContext - Additional context may be exposed. For example, in next.js apps, the next.js webpack config options are included.

A hook should return a new Webpack config object derived from the original. The usage of webpack-merge is recommended when doing so since it can properly handle the overloaded types within Webpack config properties, which can be tricky.

import webpackMerge from 'webpack-merge';

export default {
  name: 'sample-plugin',
  hooks: {
    webpackConfig: function webpackConfigHook( gasket, config, context) {
    const { isServer, webpack } = context;

    return isServer
      ? config
      : webpackMerge.merge(config, {
        plugins: [
          new webpack.DefinePlugin({
            MEANING_OF_LIFE: 42
          })
        ]
      });
    }
  }
};

License

MIT