JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 8
  • Score
    100M100P100Q48608F
  • License SEE LICENSE IN LICENSE

Webpack configuration for Symfony project - turnkey

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-symfony

Webpack configuration file for Symfony project - 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-symfony
  • Update package.json scripts section with:
    • "dev": "webpack-symfony" // Add '-d' argument to webpack command
    • "prod": "NODE_ENV="prod" webpack-symfony" // Add '-p' argument to webpack command

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

If first arguments is a string, it's interpreted as entry filename. Other arguments are passed to webpack

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

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.

'use strict';

const config = require('webpack-symfony/config.js');

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

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

Requirements

Webpack 3.10

Thanks