Webpack Encore Pack

A pack of dependencies including Webpack Encore.

Features

Webpack Encore Pack is just a pack of dependencies that we always use on our projects (sass, postcss, ...), this package has no specific features.

Included dependencies:

@symfony/webpack-encore
autoprefixer
postcss
postcss-loader
sass
sass-loader

Installation

This package is hosted on GitHub Packages, so you must tell to npm/yarn where to download it. Please read Authenticating to GitHub Packages.

You can run npm login --registry=https://npm.pkg.github.com --scope=@yproximite or create a .npmrc file with the following content:

@yproximite:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=<access token>

Then run:

$ yarn add --dev @yproximite/webpack-encore-pack

Usage

Read the Webpack Encore documentation.

This is the base webpack.config.js we use:

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

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

// Manually define `process.env.NODE_ENV`, since Encore does not do it already
process.env.NODE_ENV = process.env.NODE_ENV || (Encore.isProduction() ? 'production' : 'development');

Encore
  // directory where compiled assets will be stored
  .setOutputPath(`public/build`)
  // public path used by the web server to access the output path
  .setPublicPath(`/build`)

  /*
   * ENTRY CONFIG
   */
  .addEntry('app', [`./assets/app`])
  // .addEntry('page.1', [`./assets/pages/1`])
  // .addEntry('page.2', [`./assets/pages/2`])

  // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
  .splitEntryChunks()

  // will require an extra script tag for runtime.js
  // but, you probably want this, unless you're building a single-page app
  .enableSingleRuntimeChunk()

  /*
   * FEATURE CONFIG
   *
   * Enable & configure other features below. For a full
   * list of features, see:
   * https://symfony.com/doc/current/frontend.html#adding-more-features
   */
  .cleanupOutputBeforeBuild()
  .enableSourceMaps()
  // enables hashed filenames (e.g. app.abc123.css)
  .enableVersioning(Encore.isProduction())
  .disableCssExtraction(Encore.isDevServer())
 
  .configureBabelPresetEnv(config => {
    config.useBuiltIns = 'usage';
    config.corejs = 3; // you must install `core-js`
  })

  // enable Sass loader
  .enableSassLoader()

  // enable PostCSS loader, you must create a `postcss.config.js` file
  .enablePostCssLoader()

  // we use virtual machines with NFS, this is required to make watching work properly
  .configureWatchOptions(options => {
    options.poll = 150; // enable polling, useful in NFS partition (virtual machine)
  });

module.exports = Encore.getWebpackConfig();

and postcss.config.js:

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')(),
  ],
};

Development workflow

You need to install some dependencies first:

$ yarn

Contribution

Make a pull request on master, its title should follows Angular commit message convention
You should Squash and Merge your pull request

Publishing a new release

This is automatically done by GitHub Actions and semantic-release when you merge a pull request. The preset @kocal/semantic-release-preset is used.