JSPM – webpack-symfony@3.1.4

Package Exports

webpack-symfony

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (webpack-symfony) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Thanks BP