⚠️ This project has been deprecated

Continued development is being carried out on practically/webpack-config.

Practically Webpack 4 Config

An abstraction api for generating webpack configurations.

Installation

yarn add @practically/webpack-4-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.

const c = require('@practically/webpack-4-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

Babel

For babel you can add a .babelrc to your project. Below is an really basic config.

// .babelrc
{
    "presets": ["env"]
}

CSS

To use css you can call the styles function. Note this has to be called after initialize

const c = require('@practically/webpack-4-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.

c.styles();

LESS

For less make shore you have the called the styles function and the less loader will have been added.

c.styles();

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.

// webpack.config.js
c.typescript();

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

// webpack.config.js
c.html('path/to/index.html');

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.

"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.

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. 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.

const path = require('path');
const merge = require('webpack-merge');
const c = require('@practically/webpack-4-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

Practically/webpack-4-config