webpack-symfony

Webpack configuration - turnkey

Move to package Webpack turnkey

How it works

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

You can override directory with environment variable:

• PROJECT_DIR: absolute path to the project directory (process.cwd) (ex: '/home/project')
• ASSET_SUFFIX: relative path to PROJECT_DIR (process.cwd) (ex: 'assets')
• ASSET_DIR: absolute path to entries of type asset directory (ex: '/home/project/assets')
• PAGE_SUFFIX: relative path to ASSET_DIR (ex: 'pages')
• PAGE_DIR: absolute path to entries of type page directory (ex: '/home/project/assets/pages')
• PUBLIC_SUFFIX: relative path to PROJECT_DIR (process.cwd) (ex: 'public')
• PUBLIC_DIR: absolute path to public folder (ex: '/home/project/public')
• OUTPUT_SUFFIX: folder name between public directory and page path (ex: 'js')

Install

• npm i -S webpack-turnkey
• Update package.json

{
    "name": "...",
    "version": "...",
    "scripts": {
        "dev": "webpack-turnkey", /* Add '-d' argument to webpack command */
        "prod": "NODE_ENV=prod webpack-turnkey", /* Add '-p' argument to webpack command */
    },
}

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" npm run dev => assets/pages/game/*
• WEBPACK_TURNKEY_ENTRY="homepage.jsx" npm run dev => assets/pages/homepage.jsx
• WEBPACK_TURNKEY_ENTRY="profile/index.jsx" npm run dev => assets/pages/profile/index.jsx

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

Examples:

• npm run dev -- game --watch => assets/pages/game/*
• npm run dev -- homepage.jsx --watch => assets/pages/homepage.jsx
• npm run dev -- profile/index.jsx --watch => assets/pages/profile/index.jsx
• npm run dev -- game homepage.jsx profile/index.jsx --watch => assets/pages/profile/index.jsx

ESLint

An option --eslint use it with : npm run dev -- --eslint --watch It will add .eslintrc.js at the root of your project if not exists and compile with it.

Proposed configuration

Loaders

Files loaded and extensions permitted :

For codes files :

• .html
• .js / .jsx
• .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
• @middlewares => ASSET_DIR/middlewares
• @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 config = require('webpack-turnkey/config.js');
 
module.exports = Object.assign({}, 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: [...]
};

Requirements

Webpack >= 3.10

Thanks