Webpack Config: Node
Generates a Webpack 4 config for Node applications written in Typescript.
Example
package.json:
"scripts": {
// Build for production mode
"build": "webpack --mode production"
},
"dependencies": {
// This package
"@wildpeaks/webpack-config-node": "...",
// Peer dependencies
"typescript": "...",
"webpack": "...",
"webpack-cli": "..."
}
webpack.config.js:
'use strict';
const {join} = require('path');
const getConfig = require('@wildpeaks/webpack-config-node');
module.exports = function(_env, {mode = 'production'} = {}) {
return getConfig({
mode,
entry: {
myapp: './src/myapp.ts'
},
rootFolder: __dirname,
outputFolder: join(__dirname, 'dist')
});
};
Options
mode
: String
Default: production
.
Use production
to optimize the output (JS files are minified).
See Mode in the Webpack documentation.
entry
: Object
Webpack entries.
Default: {}
Example:
{
app1: './src/entry1.ts',
app2: './src/entry2.ts',
app3: './src/entry3.ts'
}
See Entry Points in the Webpack documentation.
jsFilename
: String
Custom filename for JS bundles.
By default, files are named [name].js
(development mode) or [hash].[name].js
(production mode).
For example, this generates assets/scripts/app1.js
:
{
"entry": {
"app1": "./src/example.ts"
},
"jsFilename": "assets/scripts/[name].js"
}
jsChunkFilename
: String
Custom filename for JS chunks.
By default, files are named chunk.[id].js
(development mode) or [hash].chunk.[id].js
(production mode).
For example, this generates assets/scripts/chunk.0.js
:
{
"jsChunkFilename": "assets/scripts/chunk.[id].js"
}
rootFolder
: String
Absolute path to the root folder context. Defaults to the process current working directory.
Examples: "C:/Example"
or /usr/share/www/example
See context in the Webpack documentation.
outputFolder
: String
Absolute path to the output folder, where files are emitted.
Defaults to subfolder dist
in rootFolder
.
Example: "C:/Example/dist"
or /usr/share/www/example/dist
See output.path in the Webpack documentation.
publicPath
: String
Path prepended to url references.
Default: "/"
Example: "/mysite/"
See publicPath in the Webpack documentation.
copyPatterns
: Object[]
Additional files & folders to copy as-is, despite not being referenced by import
or require
.
Default: []
.
Examples:
// Copy a directory:
// "models/example.ext" is copied to "assets/example.ext"
{from: 'models', to: 'assets'}
// Copy specific files:
// "extras/models/example.gltf" is copied to "assets/extras/models/example.gltf"
{from: 'extras/**/*.gltf', to: 'assets'}
// Copy specific files:
// "extras/models/example.gltf" is copied to "assets/models/example.gltf"
{from: '**/*.gltf', to: 'assets', context: 'extras'}
// Ignore some files
{from: 'textures', to: 'assets', ignore: ['Thumbs.db']}
See patterns in the copy-webpack-plugin
documentation.
sourcemaps
: Boolean
Use true
to generate sourcemaps for scripts, false
to skip them.
Default: true
skipHashes
: Boolean
If true
, mode "production" won't add hashes in filenames.
Default: false
skipReset
: Boolean
If true
, it will not empty the output folder at the start.
This is useful if you have multiple configs at the same time and are emptying the output folder before starting Webpack.
Default: false
.
Exclude specific modules
Target node
already excludes native modules like fs
from the bundles,
meaning the output script will contain require("fs")
calls.
You can exclude additional modules using externals:
'use strict';
const {join} = require('path');
const getConfig = require('@wildpeaks/webpack-config-node');
module.exports = function(_env, {mode = 'production'} = {}) {
const config = getConfig({
mode,
entry: {
myapp: './src/myapp.ts'
},
rootFolder: __dirname,
outputFolder: join(__dirname, 'dist')
});
// This generates `require("mymodule")` in the output
// instead of copying the source of mymodule in the bundle.
config.externals = {
mymodule: "commonjs mymodule"
};
return config;
};
You could also use package webpack-node-externals
to exclude the entire node_modules
folder, but it's best to bundle as much of the dependencies
as possible to optimize for runtime.
Babel
Note that it intentionally doesn't use Babel because Typescript itself can already take care of transpiling to ES2017 + ES Modules, and Webpack converts the ES Modules. This greatly reduces the number of dependencies and avoids limitations of the Typescript plugin for Babel.