Configuring Webpack

Paperclip works with Webpack 4 and 5. To get started, install these dependencies:

npm i @paperclip-ui/compiler-react paperclip-loader --save-dev

Next, in the same directory as webpack.config.js, copy this content to paperclip.config.json:

{
  "srcDir": "./src"
}

srcDir is where your *.pc files go. More docs on this config can be found here.

Next, update your Webpack config to look something like this:

module.exports = {
  module: {
    // ... 
    rules: [

      // ...

      {
        test: /\.pc$/,
        loader: "paperclip-loader",
        options: {

          // config for your Paperclip files
          config: require("./paperclip.config.json")
        }
      },


      // CSS loaders required to load styles
      {
        test: /\.css$/i,

        use: ["style-loader", "css-loader"],

        // this also works too
        // use: [MiniCssExtractPlugin.loader, "css-loader"]
      },

      // Highly recommend
      {
        test: /\.(png|jpe?g|gif|ttf|svg)$/i,
        use: [
          {
            loader: "file-loader"
          }
        ]
      }
    ],
  },
};

Paperclip requires that you use css-loader in order to work, and either the style-loader, or mini-css-extract-plugin to go with that. It's also recommended that you include url-loader or file-loader in your webpack config so that you can import images, and other assets into your Paperclip files.

After that, you can start using Paperclip in your Webpack project!