# Webpack

Source: https://plumeria.dev/docs/integration/webpack





[`examples/webpack`](https://github.com/zss-in-js/plumeria/tree/main/examples/example-webpack) shows how to use [`@plumeria/unplugin`](https://www.npmjs.com/package/@plumeria/unplugin) in Webpack.\
It compiles styles into CSS via AST parsing, with HMR support.

<Steps>
  <Step>
    ## Installation [#installation]

    <Tabs items="['npm',  'yarn', 'pnpm']">
      <Tab>
        ```sh title="Terminal"
        npm i -D @plumeria/unplugin
        ```
      </Tab>

      <Tab>
        ```sh title="Terminal"
        yarn add -D @plumeria/unplugin
        ```
      </Tab>

      <Tab>
        ```sh title="Terminal"
        pnpm i -D @plumeria/unplugin
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    ## Usage [#usage]

    ```js title="webpack.config.js"
    import plumeria from '@plumeria/unplugin';

    export default { 
      module: {
        rules: [
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
          },
        ],
      },
      plugins: [ 
        plumeria.webpack(), 
      ],
    };
    ```
  </Step>
</Steps>

<Cards>
  <Card title="Shipping this as a component library" href="/docs/integration/component-library" />

  <Card title="See more about Installation unplugin" href="/docs/getting-started/installation" />
</Cards>