@studyportals/webpack-helper
v6.0.6
Published
A collection of standard configurations and helpers for webpack.
Downloads
5,608
Maintainers
Keywords
Readme
WebpackHelper
WebpackHelper is a utility that makes it easy to set up a webpack configuration for Studyportals' projects that adhere to our Webpack quality criteria.
Table of Contents
Webpack version
This version of WebpackHelper is based on webpack 5. Some earlier WebpackHelper versions used earlier versions of Webpack. If you get syntax errors when updating to the latest version of WebpackHelper, please check out the Webpack documentation.
Notes on updating Webpack from v4 to v5
Below are some notes that might be helpful when you're upgrading a microservice from webpack-helper v2 (based on Webpack v4) to v3 (based on Webpack v5).
Dev server
Webpack-helper v2 and below: Your development.devServer
file might include these parts:
{
development: {
devServer: {
open: true,
overlay: true,
writeToDisk: true
}
}
}
Webpack-helper v3 and beyond: Your webpack.config.js
file should configure those parts like this:
{
development: {
devServer: {
client: {
overlay: true
},
devMiddleware: {
writeToDisk: true
},
open: true,
static: path.join(__dirname, '.') // Related to writeToDisk.
}
}
}
Exporting
Webpack-helper v2 and below: Your webpack.config.js
file ended with the following:
module.exports = mode => configuration.get(mode);
Webpack-helper v3 and beyond: Your webpack.config.js
file should end with the following (as is also mentioned further below):
module.exports = (env, details) => configuration.get(details.mode);
Quick Start
npm i -D @studyportals/webpack-helper
After installation, getting started is quite easy. Just set up a webpack.config.js
file in the root of your project, require Webpack Helper and set up a configuration using it's create
method like so:
const path = require('path');
const WebpackHelper = require("@studyportals/webpack-helper");
const configuration = WebpackHelper.create({
entry: [
"./src/main.ts"
],
output: {
path: path.resolve(__dirname, './dist'),
fileName: 'bundle',
hash: true,
// Use this if you want to control hashing for js and css separately
hash: {
js: true,
css: false
}
},
preset: "vue-typescript",
bob: {
name: 'MicroService',
html: '<div id=\"MicroServicePlaceholder\"></div>',
baseURL: '/dist',
defer: ['style'],
dllPackages: [
{
name: "package-dll",
manifest: require("@studyportals/package-dll/dist/manifest.json")
}
]
},
common: {
//any config
},
development: {
//any config
},
production: {
//any config
}
});
When your configuration is created you can get an instance of it for the correct environment and export it for webpack to use like so:
module.exports = (env, details) => configuration.get(details.mode);
Configuration
Webpack Helper offers a compact but flexible configuration interface. Below you will find every option available.
entry (required)
The entrypoint for your webpack bundle. This can either be configured as an object with the bundle name as a key and the path as a value or as an array of paths if your project requires multiple entry points.
entry: [
"./src/main.ts"
]
//or
entry: {
bundle: "./src/main.ts"
}
Working with packaged components & libraries
When working with packaged components and libraries it is required to keep the bundle name in line with the major version of the package. This helps to prevent reference issues when multiple versions of a package load on a single page.
// version 1
entry: {
multiselect_v1: "./src/main.ts"
}
// version 2
entry: {
multiselect_v2: "./src/main.ts"
}
DLL
When working with a packaged component as a DLL, both the JS bundle and CSS bundle from the core package must be referenced, as below:
entry: {
multiselect_v2: [
'@studyportals/multiselect/dist/multiselect.js',
'@studyportals/multiselect/dist/multiselect.css'
]
}
output (required)
The output object has some options that define how your bundle will be output. It has the following properties:
path
(required): The target directory for all output files.library
: The name of the exported library, which will also be used to namespace sourcemaps. This will default tonull
.publicPath
: The url to the output directory resolved relative to the HTML page. This will default tonull
.fileName
: A custom filename for your bundle. This will default to[name]
which refers to the name you've given your entrypoint.hash
: Whether or not to add build hashes to your filenames. This will default totrue
. Whenever you want different values for your js and css you can pass an object with separate properties and values as in the example below.crossOriginLoading
: Tells webpack to enable cross-origin loading of chunks. Can either be set toanonymous
oruser-credentials
.
output: {
path: path.resolve(__dirname, './dist'),
library: 'test-microservice',
publicPath: '/assets/',
fileName: 'application',
crossOriginLoading: 'anonymous',
hash: false,
//or
hash: {
js: true,
css: false
}
}
preset
The preset property determines which preset to load into your webpack configuration.
preset: "vue-typescript | typescript | javascript"
bob
The bob object adds all necessary configuration to have your project generate a manifest file to be used by Bob.
name
(required): The name of your microservice.html
(required): The HTML that needs to be output by your microservice. Can be a path to a document or a snippet.baseURL
: The baseURL for your microservice assets.async
: An array of JS filenames to be loaded async.defer
: An array of CSS filenames to be lazy-loaded.exclude
: An array of filenames (CSS and JS) that should be excluded from your manifest file.dllPackages
: An array of objects that reference your Dll dependencies. They all require a name and a Dll manifest in the form of a json file.
bob: {
name: 'MicroService',
html: '<div id=\"MicroServicePlaceholder\"></div>',
baseURL: '/dist',
defer: ['style'],
exclude: ['demo-assets'],
dllPackages: [
{
name: "package-dll",
manifest: require("@studyportals/package-dll/dist/manifest.json")
}
]
}
WebpackHelper uses BobManifestGenerator to generate a manifest file.
common
Extra Webpack configuration to be used for all environments can be passed in the common
object. This configuration needs to adhere to Webpack's configuration interface and will be merged in with the other configuration through webpack-merge.
development
Extra Webpack configuration to be used for all development builds can be passed in the development
object. This configuration needs to adhere to Webpack's configuration interface and will be merged in with the other configuration through webpack-merge.
NOTE: Some default configuration for development builds will be added automatically. Details can be found here.
production
Extra Webpack configuration to be used for all production builds can be passed in the production
object. This configuration needs to adhere to Webpack's configuration interface and will be merged in with the other configuration through webpack-merge.
NOTE: Some default configuration for production builds will be added automatically. Details can be found here.
Presets
In order to make your life as easy as possible, Webpack Helper ships with a set of presets that will take care of putting some essential plugins and loaders in your configuration. The different presets are listed below.
More in depth information on what configuration these presets will add to your project can be found here.
javascript
The javascript preset will resolve all .js
and .json
files and transpiles them with Babel. If your project has styling, it will separate that out in a separate .css
file.
typescript
The typescript preset will resolve all .ts
, .tsx
, .js
and .json
files. It transpiles them using tsc and Babel. Be aware that you will need to include a tsconfig.json
in your project for it to work properly. If your project has styling, it will separate that out in a separate .css
file.
vue-typescript
The vue-typescript preset will resolve all .vue
, .ts
, .tsx
, .js
and .json
files. It transpiles them using vue-loader, tsc and Babel. Be aware that you will need to include a tsconfig.json
in your project for it to work properly. If your project has styling, it will separate that out in a separate .css
file.
DoD compliance with Babel and Browserslist
In order to comply to Studyportals' definition of done we use babel
to transpile our front-end code according to the browsers we need to support. To do this your project needs some configuration. When Webpack Helper is installed it will put standard configuration in the root of your project which consists of 2 files:
.babelrc
: A standard configuration for babel that loads thebabel-env
andbabel-typescripts
presets. You might need to add more plugins for your specific project..browserslistrc
: A configuration file for browserslist. This is used bybabel-env
to determine which browsers to transpile the code for. Within this file the configuration for student facing products will be loaded by default but other configurations can be easily loaded by uncommenting some lines.
Unit testing
From version 6.0.0
onwards test dependencies are no longer included and should be installed separately. It's also recommended to replace jest with vitest due the complex nature of package jungle. A upgrade guide can be find here