Webpack Config

Upgradeable collection of Webpack plugins, loaders and configuration for Deloitte Digital projects.

Rather than installing and configuring many different build tools, such as Webpack, React/Vue, Babel, Sass, and PostCSS, you can simply use this single package and get these tools up and running in a flash, in a way that is consistent with other Deloitte Digital FED projects.

Guiding principles:

Build tools should be consistent across similar projects; this helps maintainability, on-boarding, and knowledge-sharing.
Build tools should be maintained and continually improved in a central location.
A workflow should be available to pull build tooling improvements into ongoing projects.

The following project types are supported:

Web standards projects
Vue.js projects
React projects

Included Packages
Installation
Available Scripts
Options
- How to customise the webpack config
- SASS
Examples
To do
FAQs
License information

Included Packages

Core packages

Name	Description
webpack	Webpack is the engine that allows us to process files and bundle them into packages according to rules that we specify.
babel-core	Babel is a JavaScript compiler. We write our JavaScript according to the latest spec (ESNext), and Babel compiles it into a specified format (see babel-preset-env). This package is the core compiler for Babel.
node-sass	The engine of the popular stylesheet preprocessor, Sass.
post-css	A tool for applying transformations to CSS, such as adding browser prefixes with Autoprefixer.
eslint-config-deloitte	Deloitte Digital's JavaScript code standards as an ESLint extensible config. Also includes the ESLint package.
stylelint-config-deloitte	Deloitte Digital's Sass code standards as a Stylelint extensible config. Also includes the Stylelint package.

Plugins and Loaders

Name	Description
autoprefixer	A PostCSS plugin for adding browser prefixes to CSS.
babel-loader	The integration between Babel and Webpack.
babel-preset-env	Presets specify the output format for Babel. This preset allows us to generate ES5 output that will run on whichever browsers we specify. To specify which browsers are supported, add a `browserslist` entry to your project's `package.json` file.
clean-webpack-plugin	Cleans out the `dist` folder before starting a new build.
css-loader	A Webpack loader which allows us to load CSS files with `@import` and `url()`.
mini-css-extract-plugin	Webpack's architecture is built around JavaScript. Support has been added for CSS, however it results in CSS being embedded inside JavaScript files. This package allows us to export CSS into standalone files.
sass-loader	The integration between Sass and Webpack.
style-loader	Allows us to embed CSS into JavaScript. This is useful for functional CSS that is specifically related to a JavaScript module, for example the `.shade-bg` rule in DD Shade
webpack-cli	The command line interface for Webpack allows us to enter Webpack commands into our project's `package.json` file.
webpack-serve	A lean, modern, and flexible Webpack development server which supports live reloading.

Vue.js packages

Name	Description
vue-loader	A Webpack loader which allows us to use `*.vue` files.
vue-template-compiler	Used to pre-compile Vue templates into render functions

React packages

Name	Description
babel-preset-react	Strip flow types and transform JSX into createElement calls

⬆ back to top

Install for a standard js project

Add the package as a dev dependency, by running:

npm install @deloitte-digital-au/webpack-config --save-dev

Add a webpack.config.js file which imports Webpack config:

const config = require('@deloitte-digital-au/webpack-config'); 

config.entry = {
	main: [
		'./src/index.js',
	],
};

module.exports = config;

Complete the Getting Started guide.

Install for a Vue.js project

Add the package as a dev dependency, by running:

npm install @deloitte-digital-au/webpack-config-vuejs --save-dev

Add a webpack.config.js file which imports Webpack Config Vue js:

const config = require('@deloitte-digital-au/webpack-config-vuejs');

config.entry = {
	main: [
		'./src/index.js',
	],
};

module.exports = config;

Complete the Getting Started guide.

Install for a React project

Add the package as a dev dependency, by running:

npm install @deloitte-digital-au/webpack-config-react --save-dev

Add a webpack.config.js file which imports Webpack Config React:

const config = require('@deloitte-digital-au/webpack-config-react');

config.entry = {
	main: [
		'./src/index.js',
	],
};

module.exports = config;

Complete the Getting Started guide.

Getting Started

1. Browsers

Add a browserslist property to your project's package.json file to define supported browsers:

"browserslist": [
  "last 3 versions",
  "IE 11",
  "iOS >= 8"
]

Autoprefixer and Babel will refer to this browserslist property to determine the output format for CSS and JavaScript.

ℹ️ Alternatively you can choose to specify your supported browsers in a .browserslistrc file.

2. Babel

Add a babel property to your project's package.json file to specify Babel options.

It is recommended to use the env preset, which tells Babel to generate ES5 output that will run on whichever browsers we specify as supported browsers.

"babel": {
  "presets": [
    "env"
  ]
}

For React projects, use:

"babel": {
  "presets": [
	"react"
    "env"
  ]
}

ℹ️ Alternatively you can choose to specify your Babel config in a .babelrc file.

3. Linters

3.1 Add an ESLint configuration file called .eslintrc.js to your project:

module.exports = {
	extends: [
		'eslint-config-deloitte',
	],
};

3.2 Add a Stylelint configuration file called .stylelint.js to your project:

module.exports = {
	extends: [
		'stylelint-config-deloitte',
	],
};

4. Scripts

Add build, start, and lint scripts to your project's package.json file:

"scripts": {
  "build": "webpack --mode production",
  "start": "webpack-serve --config webpack.config.js --open",
  "lint": "lint:js && lint:styles",
  "lint:js": "eslint \"**/*.js\"",
  "lint:styles": "stylelint \"**/*.scss\"",
}

⬆ back to top

Available Scripts

In the project directory, you can run:

`npm start`

Runs a local development server, rebuilds bundles when the source files change, and live-reload in the browser.

`npm run build`

Builds the app for production to the dist folder. It correctly bundles in production mode and optimizes the build for the best performance.

`npm run lint`

Lint's the JavaScript and Scss files in the src directory.

If errors are reported, ESLint may be able to fix them automatically for you. Just run:

./node_modules/.bin/eslint --fix "./src/**/*.js"

ℹ️ Make sure you review the changes ESLint made before you commit them.

You can run the linters individually with: npm run lint:js and npm run lint:styles.

⬆ back to top

Options

How to customise the webpack config

@deloitte-digital-au/webpack-config returns a preconfigured Webpack configuration. You can modify this as you need, for example by adding an entry property.

You can put multiple source files into one bundle:

config.entry = {
	main: [
		'./src/index.js',
		'./src/style.scss',
	],
};

Or add a new plugin

config.plugins.push(/* NEW PLUGIN HERE*/);

SASS

Stylesheets will be extracted into standalone CSS files by default. If you would like them to be embedded into the JavaScript file, use an extension of .js.scss.

⬆ back to top

Examples

Refer to the demo folders in the packages folder.

⬆ back to top

To do

Publish to npm
Add SVG optimisation pipeline with SVGO
Add prettier.io (first create prettier-config-deloitte package)

⬆ back to top

FAQs

Q: What if I want to install a newer version of eslint-config-deloitte, which has not yet been released in @deloitte-digital-au/webpack-config?

A: You can still npm install eslint-config-deloitte in your project. Then your project will use this version of eslint-config-deloitte instead of the version that is installed via @deloitte-digital-au/webpack-config.

⬆ back to top

Known issues

Incorrect URLs in some source maps

Source maps for SCSS files embedded inside JS files have incorrect URLs webpack-contrib/css-loader#652

Webpack generates extraneous JavaScript for CSS files

If you define an entry with CSS but no JavaScript, Webpack will still output a (useless) JavaScript file for the entry along with the CSS. For example if you did this:

config.entry = {
	main: [
		'./script.js',
	],
	style: [
		'./style.scss', // Not recommended to have an entry with just CSS
	],
};

Then three files would be generated:

main.js (good)
style.css (good)
style.js (useless)

To avoid this it is recommended to attach your CSS to an entry that also has JavaScript. For example:

config.entry = {
	main: [
		'./script.js',
		'./style.scss',
	],
};

This will only generate two files:

main.js (good)
main.css (good)

⬆ back to top

Who is Deloitte Digital?

Part Business. Part Creative. Part Technology. One hundred per cent digital.

Pioneered in Australia, Deloitte Digital is committed to helping clients unlock the business value of emerging technologies. We provide clients with a full suite of digital services, covering digital strategy, user experience, content, creative, engineering and implementation across mobile, web and social media channels.

http://www.deloittedigital.com/au

LICENSE (BSD-3-Clause)

View License

⬆ back to top

duyenho / webpack-config

Webpack Config

Table of contents

Included Packages

Core packages

Plugins and Loaders

Vue.js packages

React packages

Installation

Install for a standard js project

Install for a Vue.js project

Install for a React project

Getting Started

1. Browsers

2. Babel

3. Linters

4. Scripts

Available Scripts

`npm start`

`npm run build`

`npm run lint`

Options

How to customise the webpack config

SASS

Examples

To do

FAQs

Known issues

Who is Deloitte Digital?

LICENSE (BSD-3-Clause)

About

Languages