webpack-turnkey
Webpack configuration project - turnkey
Last updated 3 months ago by jochlain .
SEE LICENSE IN LICENSE · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install webpack-turnkey 
SYNC missed versions from official npm registry.

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

Requirements

Webpack >= 3.10

Thanks

Thanks BP

Current Tags

  • 1.9.0-beta.1                                ...           beta (3 months ago)
  • 1.9.4                                ...           latest (3 months ago)

40 Versions

  • 1.9.4                                ...           3 months ago
  • 1.9.3                                ...           3 months ago
  • 1.9.2                                ...           3 months ago
  • 1.9.1                                ...           3 months ago
  • 1.9.0                                ...           3 months ago
  • 1.9.0-beta.1                                ...           3 months ago
  • 1.8.0                                ...           3 months ago
  • 1.7.0-beta.4                                ...           3 months ago
  • 1.7.0-beta.3                                ...           3 months ago
  • 1.7.0-beta.2                                ...           3 months ago
  • 1.7.0-beta.1                                ...           3 months ago
  • 1.7.0-beta.0                                ...           3 months ago
  • 1.6.3                                ...           9 months ago
  • 1.6.2                                ...           9 months ago
  • 1.6.1                                ...           9 months ago
  • 1.6.0                                ...           9 months ago
  • 1.5.6                                ...           10 months ago
  • 1.5.5                                ...           10 months ago
  • 1.5.4                                ...           10 months ago
  • 1.5.3                                ...           10 months ago
  • 1.5.2                                ...           a year ago
  • 1.5.1                                ...           a year ago
  • 1.5.0                                ...           a year ago
  • 1.4.4                                ...           a year ago
  • 1.4.3                                ...           a year ago
  • 1.4.2                                ...           a year ago
  • 1.4.1                                ...           a year ago
  • 1.4.0                                ...           a year ago
  • 1.3.1                                ...           a year ago
  • 1.3.0                                ...           a year ago
  • 1.2.0                                ...           a year ago
  • 1.1.8                                ...           a year ago
  • 1.1.7                                ...           a year ago
  • 1.1.6                                ...           a year ago
  • 1.1.5                                ...           a year ago
  • 1.1.4                                ...           a year ago
  • 1.1.3                                ...           a year ago
  • 1.1.2                                ...           a year ago
  • 1.1.1                                ...           a year ago
  • 1.1.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 43
Last Day 0
Last Week 41
Last Month 1
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |