arc-ps-fusion-webpack

Arc Professional Services Fusion Webpack

This is a common Webpack configuration used for Arc Fusion projects.

Getting Started

To get started you must add the project as a developer dependency. This can be done by running the following command:

yarn add arc-ps-fusion-webpack --save --dev

Once added you'll need to install Webpack into your project root also. An example of this configuration would look something like this:

{
  "name": "boston-globe-pagebuilder-fusion-features",
  "version": "0.0.0",
  "description": "PageBuilder Fusion features for the Boston Globe",
  "devDependencies": {
    "arc-ps-fusion-webpack": "0.0.7",
    "webpack-cli": "^2.0.15",
    "webpack-merge": "^4.1.0",
    "webpack": "^4.6.0"
  },
  "scripts": {
    "build": "NODE_ENV=production webpack --config config/build/webpack.config.js",
    "dev": "concurrently --kill-others \"NODE_ENV=development webpack --config config/build/webpack.config.js\"",
    "test": "jest"
  },
  "author": "Arc Publishing",
  "license": "ISC"
}

Once installed you can then add a config/build/webpack.config.js file to your PageBuilder project to get started.

const merge = require('webpack-merge')
const {
  config: {
    base,
    build 
  }
} = require('arc-ps-fusion-webpack')
 
module.exports = merge(
  base,
  build({
    mode: process.env.NODE_ENV
  })
)

Available Commands

The following commands will be available once you've configured your package.json file:

yarn dev|build

Building Specific Sites

You can add flags to the yarn build or yarn dev command to watch specific things. For example you can do

yarn build --base-only or yarn build -boston -nydn

Compiling Assets

The webpack setup requires a src directory in the root of your project, with two sub directories.

base: The base directory is where you'll hold the shell of your framework, with a series of defined Sass variables placeholders.

properties This is where you'll house your site specific properties for multi site. For instance you may have properties/boston/boston.scss which will import the base scss file, inside this file you'll define your variables before you extend the base css file.