Configuring Webpack

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

npm i paperclip-compiler-react paperclip-loader --save-dev

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

{
  "compilerOptions": {
    "name": "paperclip-compiler-react"
  },
  "sourceDirectory": "./src"
}

sourceDirectory 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"
          }
        ]
      }
    ],
  },
};

If you want to see an example of this, check out the Paperclip playground webpack.config.js

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 project! I'd recommend installing the visual tooling next, then checking out the React docs on how to use Paperclip in your React app.