Webpack configuration following open-wc recommendations

Usage no npm install needed!

<script type="module">
  import openWcWebpack from 'https://cdn.skypack.dev/@open-wc/webpack';


Webpack Helpers

Part of Open Web Components

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.

CircleCI BrowserStack Status Renovate enabled

If you need support to use import.meta.url within webpack this is a minimal loader to support it.


This is NOT an optimal solution e.g. it will slow down your build time. However as currently import.meta results in an webpack parse error using a loader is probably the only thing we can do for now. For details see

If webpack fixed that parse error import.meta will probably work out of the box. If not then a babel plugin (that can work with AST) will be a better solution.

Manual Setup

  • yarn add @open-wc/webpack
  • Add this to your webpack config
module: {
  rules: [
      test: /\.js$/,
      loader: require.resolve('@open-wc/webpack/loaders/import-meta-url-loader.js'),