@open-wc/building-webpack
Advanced tools
Part of Open Web Component Recommendation open-wc
Open Web Components provides a set of defaults, recommendations and tools to help facilitate your web component project. Our recommendations include: developing, linting, testing, building, tooling, demoing, publishing and automating.
We provide default configuration to help you get started building your web component project with webpack.
To set up the default configuration manually:
npm i -D @open-wc/building-webpack webpack webpack-dev-server http-server
webpack.config.js:const path = require('path');
const defaultConfig = require('@open-wc/building-webpack/default-config');
module.exports = defaultConfig();
package.json:{
"scripts": {
"start": "webpack-dev-server --mode development --open",
"start:es5": "webpack-dev-server --mode development --es5",
"start:build": "http-server dist/ -o",
"build": "webpack --mode production",
"build:stats": "webpack --mode production --profile --json > bundle-stats.json"
}
}
start runs your app with auto reload for development, it only works on browsers which support modules for faster buildsstart:es5 runs your app for development, it only works on browsers that don't support modules (IE11)build builds your app for production and outputs it in the /dist folderstart:build runs your built app using a plain web server, to prove it works without magic :)build:stats creates an analysis report of your app bundle to be consumed by Webpack Visualizer and Analyserindex.html:<!doctype html>
<html>
<head></head>
<body>
<your-app></your-app>
</body>
</html>
index.js which kickstarts your JS code.
For older browser we need to load the web component polyfills. We use the polyfills-loader for that:import loadPolyfills from '@open-wc/polyfills-loader';
loadPolyfills().then(() => {
import('./my-app.js');
});
You can change the default index.html and index.js files:
module.exports = defaultConfig({
indexHTML: path.resolve(__dirname, './src/index.html'),
indexJS: path.resolve(__dirname, './src/index.js'),
});
This lets you use bare imports: import { bar } from 'foo' instead of import { bar } from '../node_modules/foo/foo.js'
Based on package.json it selects the most optimal type of module format. es modules and es2015 code is preferred, but it falls back to support other module types such as CommonJS and UMD. These can be a useful way to get done writing code today, but these are not future proof formats. We recommend using es modules as much as possible.
JS is minified for performance. HTML, CSS and is minified when they are used in combination with the html and css template tags from lit-html and lit-element.
Using webpack-babel-multi-target-plugin, our build outputs an es5 and es2015 version of your app. Using the nomodule trick, we can serve es2015 code on modern browsers and es5 on older browsers (IE11 mostly). This significantly reduces the size of your app on modern browsers.
Read more about this trick at Jakes blog post "ECMAScript modules in browsers".
Comment code gets stripped at build time. So comment away!
Note: Licence required comments are extracted and provided via {chunkname}.LICENCE files.
By default, babel's compilation of async functions and for of loops using an expensive transform and runtime. A lot of runtime code is added, and a lot of boilerplate code is added in the transform.
For async functions we use the fast-async plugin instead.
We add Language polyfills for es2015 features, such as Map and '/foo'.startsWith('/'). But only on the es5 build, so that we don't need to ship it to modern browsers.
Our config only supports standard javascript syntax and browser APIs. We support stage 3 proposals when they add significant value and are easy to support without performance penalties.
Supported proposals:
The default-config function outputs a regular webpack config, it can easily be extended using webpack-merge. For example to add an extra entry file and sass loader:
const path = require('path');
const merge = require('webpack-merge');
const createDefaultConfig = require('@open-wc/building-webpack/default-config');
const defaultConfig = createDefaultConfig();
module.exports = merge(defaultConfig, {
entry: ['additional-entry-file.js'],
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
]
},
],
},
});
We recommend extending the config only to make small additions. If your configuration deviates too much from our default setup, simply copy paste what we have and use it as a starting point. It will keep your configuration easier to understand.
FAQs
Default configuration for working with webpack
The npm package @open-wc/building-webpack receives a total of 529 weekly downloads. As such, @open-wc/building-webpack popularity was classified as not popular.
We found that @open-wc/building-webpack demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.