Skip to main content

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!