Resources
What & Link | Type |
---|---|
Bundlers Tooling Report - This is a great new resource (2020) for a comparison of common bundlers and build tools, especially based on supported feature sets. |
Comparison / Analysis |
Parcel
* --- WARNING!!! --- *
When you are on the docs pages for Parcel, make sure you are on the correct version (V1 vs V2)!
And make sure you have the version of Parcel you mean to have (parcel --version
if you want to check).
Parcel Troubleshooting
-
I'm not getting source maps!
-
Things to make sure:
- Don't use
--no-source-maps
- Don't use
--experimental-scope-hoisting
- Don't use
-
Webpack
Webpack Resources
What & Link | Type |
---|---|
Webpack Docs - "Getting Started" | Guide |
Flavio - "Introduction to Webpack" | Guide |
Andrew Welch - "An Annotated Webpack 4 Config for Frontend Web Development" | Guide |
Webpack Config File
If you want to use a config file with Webpack, you do so by making webpack.config.js
in the root of your project, and having a single export:
module.exports = {
// ...
};
For seeing all the options, and comments on what they do, reference the configuration page from the official docs.
You can use this interactive config builder tool, or this one, to help you get started.
Webpack Config File Intellisense / Autocomplete
If you are trying to get Intellisense to work in a webpack.config.js
file, add a type annotation so VSCode can understand the config object:
/** @type {import('webpack').Configuration} */
module.exports = {
mode: 'development',
// ...
}
See my blog post on the topic, for details.
Webpack Troubleshooting
-
Issues building to a subdirectory, with relative URLs (for example, lots of
ChunkLoadError
messages, bundles not loading)- You probably want to use the
config.output.publicPath
config option, and make sure that it ends with a slash (so,= '/app/
, not= '/app
)
- You probably want to use the
Rollup
Rollup Config File Intellisense / Autocomplete
If you are trying to get Intellisense to work in a rollup.config.js
file, add a type annotation so VSCode can understand the config object:
/** @type {import('rollup').RollupOptions} */
const config = {
//
};
export default config;