Adds Webpack support to your application.
npm i @gasket/plugin-webpack
Update your gasket
file plugin configuration:
// gasket.js
+ import pluginWebpack from '@gasket/plugin-webpack';
export default makeGasket({
plugins: [
+ pluginWebpack
]
});
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.
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.
Executed by getWebpackConfig action, it receives three parameters:
- The Gasket API
- A Webpack config object
- 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
})
]
});
}
}
};