@ctrine/webpack-settings-web-app v7.0.0

Common Webpack settings for web apps.

Example

You can find an example in the examples directory.

Installation

npm install @ctrine/webpack-settings-web-app

Usage

Webpack settings

The settings can be used directly in your webpack.config.js like so:

module.exports = require('@ctrine/webpack-settings-web-app').default

Babel preset (Optional)

A babel preset is also included and it contains a lot of useful plugins to support all the bleeding edge features available for babel. Add it to the .babelrc like so:

{
  "presets": [ "@ctrine/web-app" ]
}

ESLint settings (Optional)

ESLint settings containing the recommended code style is also included. Add it to the .eslintrc.json like so:

{
  "extends": "@ctrine/web-app",
  "parser": "Babel-ESLint"
}

Expected directory structure

build
src
  App.js
  index.html
.babelrc
.eslintrc.json
webpack.config.js

• build: Directory where the compiled files will reside.
• src: Project’s source.
• index.html: Optional template used as the entry point for you single page app. This can be used if you need to import external libraries.
• App.js: Your app class.
• index.html: Optional template used to render the app. It must have an element with the attribute id="root".
• .babelrc: Preset with the necessary dependencies to compile and enable hot loading.
• .eslintrc: ESLint settings.
• webpack.config.js: Actual Webpack config, the location of this file is used do determine the location of the build and src directories.

Features

• SASS, LESS and Stylus.
• All CSS files are processed with PostCSS.
• CSS modules with the extensions: .module.css, .module.less, .module.sass, .module.scss and .module.styl.
• Hot Reloading for ReactJS.