reach-et-webpack-setup

Webpack set up for ET projects

Plugins

• clean-webpack-plugin
• terser-webpack-plugin
• friendly-errors-webpack-plugin
• lodash-webpack-plugin
• mini-css-extract-plugin
• css-minimizer-webpack-plugin
• 'write-file-webpack-plugin

Loaders

• file-loader
• image-webpack-loader
• postcss-loader
• css-loader
• babel-loader
• worker-loader

Installation

  npm i --save-dev reach-et-webpack-setup

Config

Create at your root a folder called webpack and add a config.yml and add the following:

default: &default
  cue_url: https://localhost # Sets out your default local url (incase different)
  
  source_path: assets #root path to your assets folder
  image_entry: Images  # name of image folder
  stylesheets_entry: css # name of css folder
  
  public_dev_output: https://localhost/webpack #path set through proxy used by webpack server
  public_root_path: /cue-web/dist/ # output path
 
 # You can add your own config here to like:
 
 # for HTML plugin
 html_output: '../index.html'
  html_template: 'index.html'
  public_output_path: /dist # output folder 
  
  # Templates plugin
  templates_path: template
  yaml_output: /etc/escenic/cue-web # where the yaml files are outputted in docker image
  start_up_script: /usr/bin/startup.sh # startup script fired when dev-server starts
  
  # google tag manager
  google_tag_id: GTM-PXC7ST9
  
 # Image and other static assets that can be used
  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2
	
  extensions:
    - .mjs
    - .js
    - .css
    - .module.css
    - .png
    - .svg
    - .gif
    - .ico
    - .jpeg
    - .jpg

development:
  <<: *default
  # Add additional Dev config here

  # Webpack dev server config - Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    http2: false
    host: 0.0.0.0
    port: 3131
    public: https://localhost:3131
    hot: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    client_log_level: "debug"

    headers:
      Access-Control-Allow-Origin: "*"
      Access-Control-Allow-Methods: "GET, POST, PUT, DELETE, PATCH, OPTIONS"
      Access-Control-Allow-Headers: "X-Requested-With, content-type, Authorization"
    # watch: true
    history_api_fallback: true
    watch_options:
      aggregateTimeout: 300
      ignored: "**/node_modules/**"
      poll: 1000

production:
  <<: *default
  # Add additional production config here

Then create a webpack.config.js file:

/* eslint-env node */
const { webpackConfig } = require('reach-et-webpack-setup');
const { merge } = require('webpack-merge');

module.exports = merge(webpackConfig, {
  entry: { index: 'my-index.js' },
});

For a more advanved example you can pull back the config object with the data listed in config.yml (please note they will now be camelCase):

/* eslint-env node */
const { TemplatePlugin, getFiles } = require('reach-et-templates-plugin');
const { webpackConfig, config } = require('reach-et-webpack-setup');
const GoogleTagManagerPlugin = require('reach-et-webpack-google-tag-manager-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { merge } = require('webpack-merge');
const { env } = require('process');

// See reach-et-templates-plugin
const files = getFiles(config);
// Use config data
const {
  cueUrl,
  googleTagId,
  htmlOutput,
  htmlTemplate,
  publicDevOutput,
  publicOutputPath,
  publicRootPath,
  startUpScript,
  yamlOutput,
} = config;

const publicPath = env.NODE_ENV === 'development' ? publicDevOutput : publicOutputPath;

// You can pass any webpack config you want that will append to the config please see https://webpack.js.org/
module.exports = merge(webpackConfig, {
  entry: { ...files },
  plugins: [
    // See  reach-et-templates-plugin
    new TemplatePlugin({
      cueUrl: cueUrl,
      js: publicRootPath,
      publicPath,
      output: yamlOutput,
      shellScript: startUpScript,
    }),
	// see https://webpack.js.org/plugins/html-webpack-plugin/
    new HtmlWebpackPlugin({
      filename: htmlOutput,
      alwaysWriteToDisk: true,
      template: htmlTemplate,
      excludeChunks: Object.keys(files),
    }),
    // See reach-et-webpack-google-tag-manager-plugin
    new GoogleTagManagerPlugin({
      id: googleTagId,
    }),
  ],
});

Copyright (c) 2019 "Reach Shared Services Ltd"