Skip to content

webpack.md

Latest commit

 

History

History
112 lines (84 loc) · 2.71 KB

webpack.md

File metadata and controls

112 lines (84 loc) · 2.71 KB
title Webpack
parent integrations

Webpack

A plugin for integrating vanilla-extract with webpack.

Installation

npm install --save-dev @vanilla-extract/webpack-plugin

Setup

Add the plugin to your Webpack configuration, along with any desired plugin configuration.

// webpack.config.js

const {
  VanillaExtractPlugin
} = require('@vanilla-extract/webpack-plugin');

module.exports = {
  plugins: [new VanillaExtractPlugin()]
};

You'll need to ensure you're handling CSS files in your webpack config.

For example:

// webpack.config.js

const {
  VanillaExtractPlugin
} = require('@vanilla-extract/webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new VanillaExtractPlugin(),
    new MiniCssExtractPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: require.resolve('css-loader'),
            options: {
              url: false // Required as image imports should be handled via JS/TS import statements
            }
          }
        ]
      }
    ]
  }
};

If you already have css-loader configured, make sure to add exclude: /\.vanilla\.css$/i to that rule's configuration.

Configuration

// webpack.config.js

const {
  VanillaExtractPlugin
} = require('@vanilla-extract/webpack-plugin');

module.exports = {
  plugins: [
    new VanillaExtractPlugin({
      // configuration
    })
  ]
};

The plugin accepts the following as optional configuration:

identifiers

Different formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can be configured by selecting from the following options:

  • short identifiers are a 7+ character hash. e.g. hnw5tz3
  • debug identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. myfile_mystyle_hnw5tz3
  • A custom identifier function takes an object parameter with properties hash, filePath, debugId, and packageName, and returns a customized identifier. e.g.
new VanillaExtractPlugin({
  identifiers: ({ hash }) => `prefix_${hash}`
});

Each integration will set a default value based on the configuration options passed to the bundler.

externals

Effectively [ExternalItem[]] from webpack. Currently typed as any as this type was previously not exposed. The any type will be fixed in the next major version.

[ExternalItem[]]: https://github.com/webpack/webpack/blob/9211be0f7a04feb45e1074e6cf848a657dd82ebc/declarations/WebpackOptions.d.ts#L207-L211