# @practically/webpack-config > Base webpack config Latest version **1.1.0** (published 2023-03-17) · 0 weekly downloads ## Install ```sh npm install @practically/webpack-config pnpm add @practically/webpack-config yarn add @practically/webpack-config bun add @practically/webpack-config ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.0 | | Published | 2023-03-17 | | First published | 2021-08-16 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | CommonJS | | Node | >= 14.0.0 | | Dependencies | 25 | | Unpacked size | 33.8 KB | | Known vulnerabilities | 0 (+6 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 0 | | Author | Ade Attwood | | Maintainers | georgecadwallader, bheppenstall, ade-attwood | ## Links - npm: https://www.npmjs.com/package/@practically/webpack-config - Repository: https://github.com/Practically/webpack-config - Homepage: https://github.com/Practically/webpack-config#readme - Issues: https://github.com/Practically/webpack-config/issues - npm.io page: https://npm.io/package/@practically/webpack-config ## Dependencies (25) - [less](https://npm.io/package/less.md) ^4.1.1 - [sass](https://npm.io/package/sass.md) ^1.32.8 - [postcss](https://npm.io/package/postcss.md) ^8.3.6 - [webpack](https://npm.io/package/webpack.md) ^5.50.0 - [ts-loader](https://npm.io/package/ts-loader.md) ^9.2.5 - [css-loader](https://npm.io/package/css-loader.md) ^6.2.0 - [typescript](https://npm.io/package/typescript.md) ^4.0.0 - [less-loader](https://npm.io/package/less-loader.md) ^11.0.0 - [sass-loader](https://npm.io/package/sass-loader.md) ^13.0.0 - [webpack-cli](https://npm.io/package/webpack-cli.md) ^4.5.0 - [babel-loader](https://npm.io/package/babel-loader.md) ^8.0.5 - [css-mqpacker](https://npm.io/package/css-mqpacker.md) ^7.0.0 - [style-loader](https://npm.io/package/style-loader.md) ^3.2.1 - [postcss-loader](https://npm.io/package/postcss-loader.md) ^7.0.0 - [source-map-loader](https://npm.io/package/source-map-loader.md) ^4.0.0 - [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) ^7.0.0 - [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^4.1.0 - [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^5.3.2 - [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) ^5.1.4 - [babel-preset-react-app](https://npm.io/package/babel-preset-react-app.md) ^10.0.0 - [postcss-flexbugs-fixes](https://npm.io/package/postcss-flexbugs-fixes.md) ^5.0.2 - [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^2.2.0 - [webpack-manifest-plugin](https://npm.io/package/webpack-manifest-plugin.md) ^5.0.0 - [css-minimizer-webpack-plugin](https://npm.io/package/css-minimizer-webpack-plugin.md) ^4.0.0 - [fork-ts-checker-webpack-plugin](https://npm.io/package/fork-ts-checker-webpack-plugin.md) ^7.0.0 ## Recent versions - 1.1.0 (latest) — 2023-03-17 - 1.0.0 — 2022-06-13 - 0.0.4 — 2022-04-26 - 0.0.3 — 2022-02-03 - 0.0.2 — 2021-08-18 - 0.0.1 — 2021-08-16 ## README

Practically Webpack Config

An abstraction api for generating webpack configurations.

## Installation ```js yarn add -D postcss-loader postcss webpack-manifest-plugin @practically/webpack-config ``` ## Usage Once installed you can create a base `webpack.config.js` with the following contents. The `initialize` function must be the first function you call and `build` must the last. ```js const c = require('@practically/webpack-config'); c.initialize(); module.exports = c.build(); ``` ### Initialization The first function you must call is `initialize` the will start off the generation of the config. You can pass an object into the function to customize your config. | Option | Default | Description | | ----------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | src_path | ./src | The base path for all of the assets | | dest_path | ./dist | The path where you compiled asses will be put | | public_path | / | The path where you assets are going to be saved. This is used for the urls in the manifest files | | production | NODE_ENV | This will not generally need to be set as it set from the node environment | | asset_inline_size_limit | 4 \* 1024 | The file size limit of inline assets. This will determine whether assets will be injected as a Base64-encoded string or a link to an external file will be used | ### Babel For babel you can add a `.babelrc` to your project. Below is an really basic config using `babel-preset-react-app` that is included. ```json // .babelrc {"presets": ["babel-preset-react-app"]} ``` ### CSS To use css you can call the `styles` function. Note this has to be called after `initialize` ```js const c = require('@practically/webpack-config'); c.initialize(); c.styles(); module.exports = c.build(); ``` ### SCSS For scss make shore you have the called the styles function and the scss loader will have been added. ```js c.styles(); ``` ### LESS For less make shore you have the called the styles function and the less loader will have been added. ```js c.styles(); ``` Loaders for less will need to be installed in you project. ```bash yarn add -D less less-loader ``` ### Typescript To use typescript call the `typescript` function. You will also need to configure your `tsconfig.json`. You can also add a `tslint.json` to the root of your project if you want linting. ```js // webpack.config.js c.typescript(); ``` Typescript and the loaders will need to be installed in your project ```bash yarn add -D typescript ts-loader fork-ts-checker-webpack-plugin ``` ### Html With the html webpack plugin you can create a SPA and add inject all of you chunked scripts into the html. Simply call the `html` function passing in the path to your `index.html`. The second argument is optional, and is an object containing additional options to pass to `html-webpack-plugin`. For more info on what you can pass here, see the [list of available options](https://github.com/jantimon/html-webpack-plugin#options). ```js // webpack.config.js c.html('path/to/template.html', { filename: 'index.html' }); ``` The html plugin will also need to be added to your project ```bash yarn add -D html-webpack-plugin ``` ## Scripts To compile your app you can call `webpack` from you terminal to build. You can set the `NODE_ENV` to provide the environment in witch to build in, valid options are `production` and `development`. Below is an example scripts config you can put into your `package.json`. ```json "scripts": { "start": "NODE_ENV=development webpack s", "watch": "NODE_ENV=development webpack --watch", "dev": "NODE_ENV=development webpack", "development": "NODE_ENV=development webpack", "prod": "NODE_ENV=production webpack", "production": "NODE_ENV=production webpack" } ``` Once you have added the scripts to your `package.json` you can run `yarn dev` to run the `dev` script. ## Advanced Configuration There are two ways you can further customize your webpack config. The first is to simply set properties after you have called the `build` function. ```js const config = c.build(); config.plugins.push(new WepackPlugin()); module.exports = config; ``` Setting properties is good for the small and minor changes but for even more customization you can use [webpack-merge](https://github.com/survivejs/webpack-merge). This package dose not get included so you will need to install it yourself. Once installed you can merge your defined config with the one generated but this package. ```js const path = require('path'); const merge = require('webpack-merge'); const c = require('@practically/webpack-config'); c.initialize(); module.exports = merge(c.build(), { mode: 'production', bail: false, context: path.resolve(__dirname, 'client'), entry: package.resolve(__dirname, 'client', 'index.jsx') }); ``` ## Credits This package is created and maintained by [Practically.io](https://practically.io/) --- _Source: https://npm.io/package/@practically/webpack-config · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._