Webpack installation

Create your project

Start by creating a new project using NPM with Webpack and other related dependencies. We're installing dependencies for a simple project using Typescript with ts-loader in the following example.

Dependencies may vary based on the project setup. For example, you might use babel-loader instead of ts-loader if you don't use Typescript.

Install Reshaped

Download the latest Reshaped release from the Releases page and save the .tgz file into your project. Then install the package using the file path. For example, if you save the package as ./vendor/reshaped.tgz in the project root folder, you can run:

Add PostCSS config

Import a PostCSS config from Reshaped and add it to postcss.config.js file in the root folder:

Add Webpack configuration

Add all installed Webpack loaders to your Webpack config and set up the config options based on your needs. You can find an example of a simple Webpack config in our example project:

Add Typescript config (optional)

If you're using Typescript, add a configuration for it in tsconfig.json file. You can find an example of a simple Typescript config in our example project:

Start the application

Add NPM scripts to your package.json file to start the application:

Now you can run your build process with npm run start.

Start using Reshaped components

Import some of the core components in src/App.tsx and try them out:

You can find more details in our webpack-starter example on Github. If you want to learn more about components - search for the relevant components documentation in the sidebar.

Previous
Next