Webpack-turnkey NPM

Webpack configuration - turnkey

Move to package Webpack turnkey

How it works

Scripts which are in assets/pages folder are bundled into public/js as default.

Install

npm i -S webpack-turnkey
Update package.json

Usage

There are two ways to use it :

With npx
npx webpack-turnkey

With package scripts

{
    "name": "...",
    "version": "...",
    "scripts": {
        "dev": "webpack-turnkey",
        "prod": "NODE_ENV=prod webpack-turnkey"
    },
}

By default the command add -d option, when environment variable NODE_ENV is equal to prod it will pass the -p option.

Work with WEBPACK_TURNKEY_ENTRY environment variable

The value of this variable is, by default, a relative path, from assets/pages/. It can be a file or a folder.

Examples:

WEBPACK_TURNKEY_ENTRY="game" npx webpack-turnkey
- => assets/pages/game/*
WEBPACK_TURNKEY_ENTRY="homepage.jsx" npx webpack-turnkey
- => assets/pages/homepage.jsx
WEBPACK_TURNKEY_ENTRY="profile/index.jsx" npx webpack-turnkey
- => assets/pages/profile/index.jsx

Shortcut to argument(s) with no options related exists too :

Examples:

npx webpack-turnkey game
- => assets/pages/game/*
npx webpack-turnkey homepage.jsx
- => assets/pages/homepage.jsx
npx webpack-turnkey profile/index.jsx
- => assets/pages/profile/index.jsx
npx webpack-turnkey game homepage.jsx profile/index.jsx
- => assets/pages/game/*
- => assets/pages/homepage.jsx
- => assets/pages/profile/index.jsx

Override directories

You can override directory with environment variable:

WEBPACK_TURNKEY_PROJECT_DIR:
- absolute path to the project directory (process.cwd)
- (ex: '/home/project')
WEBPACK_TURNKEY_ASSET_SUFFIX:
- relative path to PROJECT_DIR (process.cwd)
- (ex: 'assets')
WEBPACK_TURNKEY_ASSET_DIR:
- absolute path to entries of type asset directory
- (ex: '/home/project/assets')
WEBPACK_TURNKEY_PAGE_SUFFIX:
- relative path to ASSET_DIR
- (ex: 'pages')
WEBPACK_TURNKEY_PAGE_DIR:
- absolute path to entries of type page directory
- (ex: '/home/project/assets/pages')
WEBPACK_TURNKEY_PUBLIC_SUFFIX:
- relative path to PROJECT_DIR (process.cwd)
- (ex: 'public')
WEBPACK_TURNKEY_PUBLIC_DIR:
- absolute path to public folder
- (ex: '/home/project/public')
WEBPACK_TURNKEY_OUTPUT_SUFFIX:
- folder name between public directory and page path
- (ex: 'js')
WEBPACK_TURNKEY_OUTPUT_DIR:
- absolute path to output directory
- (ex: '/home/project/public/js')

Options

Sourcemap

An option --sourcemap use it with : npx webpack-turnkey --sourcemap It will set options to true for styles loaders

ESLint

An option --eslint use it with : npx webpack-turnkey --eslint It will add .eslintrc.js at the root of your project if not exists and compile with it.

Bundled

An option --bundled use it with : npx webpack-turnkey --bundled It will set the project directory to the current working directory
Usefull for Symfony <= 3 projects & assetic
cd src/MyBundle/Ressources && npx webpack-turnkey --bundled
It will compile files in MyBundle/Resources/assets/pages to MyBundle/Resources/public/js

Watch and other options

Other options like --watch are passed to webpack command

Proposed configuration

Loaders

Files loaded and extensions permitted :

For codes files :

.html
.js / .jsx / .mjs
.css
.sass / .scss

For images files :

.jpg / .jpeg
.png
.gif

For fonts files :

.svg
.woff / .woff2
.ttf / .otf
.eot

Aliases

You can call specifics folders with aliases, there are :

@actions => ASSET_DIR/actions
@capsules => ASSET_DIR/capsules
@components => ASSET_DIR/components
@connecters => ASSET_DIR/connecters
@constants => ASSET_DIR/constants
@containers => ASSET_DIR/containers
@fonts => ASSET_DIR/fonts
@images => ASSET_DIR/images
@managers => ASSET_DIR/managers
@middlewares => ASSET_DIR/middlewares
@models => ASSET_DIR/models
@pages => ASSET_DIR/pages
@reducers => ASSET_DIR/reducers
@sounds => ASSET_DIR/sounds
@stylesheets => ASSET_DIR/stylesheets
@utils => ASSET_DIR/utils
@videos => ASSET_DIR/videos

Customization

Create your own webpack.config.js at the root of your project and run webpack command.

'use strict';

const wpt = require('webpack-turnkey');

module.exports = Object.assign({}, wpt.config);

If you run webpack-turnkey command with a webpack-turnkey.config.js file, it will merge default config with your config.

module.exports = {
    alias: {...},
    rules: [{...}, {...}, ...],
    extensions: [...]
};

Generation

npx webpack-turnkey --generate <format>

To generate template for start coding, two format are available:

minimal:
- Create asset and public folders
- Add folders in ASSET_DIR
  - components
  - stylesheets
starter:
- Create asset and public folders
- Add folders in ASSET_DIR
  - components
  - constants
  - managers
  - models
  - stylesheets
  - utils
- Install modules
  - @fortawesome/fontawesome
  - @fortawesome/fontawesome-free
  - @fortawesome/react-fontawesome
  - bootstrap
  - classnames
  - jquery
  - popper.js
  - react
  - react-dom
  - toast
- Create files
  - components/super.jsx : An improved component (can be deleted if not used)
  - middlewares/event.js : Contains an prevent middleware
  - pages/style.js : Instanciate boostrap, fontawesome, jquery, toastr
  - stylesheets/* : Import style with helpers