# Webpack

If you want to modify the configuration of webpack, only through the form of plugins To modify, only webpack-chain is provided to operate the configuration of webpack

import { SSR, Plugin } from '@fmfe/genesis-core';

class MyPlugin extends Plugin {
    /**
     * Modify the webpack configuration
     */
    public chainWebpack(config: Genesis.WebpackHookParams) {}
}

const ssr = new SSR();
// Add a plugin
ssr.plugin.use(new MyPlugin(ssr));

note

In a production environment, you do not need to use webpack related plugins, so you only need to use this plugin in the dev environment and build phase.

# The official built-in webpack plugin

  • babel Compile code, support TS by default
  • bar Progress bar display
  • font Font file processing
  • image Image processing
  • media Media resource handling
  • style Style file processing
  • template Template file processing
  • vue vue file processing
    You can use the above example to gain an in-depth understanding of how plugins work.