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!