Installation

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.

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.

// .babelrc
{"presets": ["babel-preset-react-app"]}

CSS

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

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.

c.styles();

LESS

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

c.styles();

Loaders for less will need to be installed in you project.

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.

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

Typescript and the loaders will need to be installed in your project

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.

// webpack.config.js
c.html('path/to/template.html', { filename: 'index.html' });

The html plugin will also need to be added to your project

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.

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