Documentation on Using LWC with Custom Webpack Configuration

[larkintuckerllc]

While using lwc-create-app is useful for many situation, it is likely it does not cover all use cases. It would be helpful to understand how to incorporate LWC into a existing build process (presumably with webpack).

[diervo]

@larkintuckerllc thats really good feedback, we will write docs and share some applications within a week or two on how to configure regular tooling (webpack, rollup et all) - we are almost done.

[davidturissini]

@larkintuckerllc have you tried https://www.npmjs.com/package/lwc-webpack-plugin ? This should integrate with any existing webpack config

[muenzpraeger]

@larkintuckerllc have you tried to use the -w flag on lwc-services which is set up via lwc-create-app? That allows to use any custom webpack config.

[larkintuckerllc]

First here is a working example; hacked from example provided by @davidturissini

https://github.com/larkintuckerllc/lwc-webpack

Below are some challenges that I ran into:

Transpiling to ES5 (for IE 11)

One problem with this example is that it is not transpiling the code (on purpose); thus the bundle is not ES5 (and thus not compatible with IE11).

Was unsuccessful in adding either:

• Babel (JavaScript) and loader
• TypeScript compiler and loader

note: In both cases, I did what I thought was correct and got unexpected results.

This is where it would be great to have a working example.

Polyfill (for IE 11)

For standard Web Components, I have been successful with:

https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs

Not sure if this is compatible with components created with LWC. Maybe there is another LWC specific polyfill.

Defining Elements

In looking at this example, we use a LWC createElement function to create a DOM element from the LWC component.

const appEl = createElement('my-app', { is: App });

In a "normal" setup, I would instead first define the custom element.

window.customElements.define('my-app', App);

then I would use to create the DOM element:

document.createElement('my-app');

When I try the "normal" approach, it seems to fail. Make me nervous that the class (App) cannot be used as a normal Web Component.

Tried to see if LWC provided a customized version of define that could be used instead of the customized version of createElement.

Bundle Splitting

With "normal" web applications, you can do bundle splitting because you import components using a JavaScript "import" command.

But for LWC, it looks like the import of a component happens automatically when the they exists in a parent template (HTML).

Having a hard time getting my head around how bundle splitting is to work here.

[caridy]

@larkintuckerllc when registering LWC as WC you must build it accordingly, change this line:

window.customElements.define('my-app', App);

into

customElements.define('my-app', buildCustomElementConstructor(App));

Make sure that you import buildCustomElementConstructor from lwc.

As for the polyfills, yes, you should be able to use google's polyfill for web components, or you can just use our @lwc/synthetic-shadow package, which is faster, and easier to debug in IE11, and it is a lot more robust with respect to the native shadow semantics.

Btw, we are releasing a couple of examples of how to use these today, stay tuned.

[jonshipman]

Any progress on this? Since the last comment create-lwc-app has been deprecated and that includes the lwc-webpack-plugin.

Trying to build with lwc-webpack-plugin fails due to not being compatible with lwc proper.

[muenzpraeger]

Can you share more details/error messages? Trying to build with lwc-webpack-plugin fails due to not being compatible with lwc proper. doesn't give hints.

Also, did you by chance check the migration information here. That has in-depth information.

https://github.com/muenzpraeger/create-lwc-app/wiki/Migration-info-v3-to-none

[jonshipman]

Still testing, but might be related to this change in loader-utils: https://github.com/webpack/loader-utils/blob/a282654ddfa0a8c9c770db1adfa064e671bcf471/CHANGELOG.md#300-2021-10-20

See: https://github.com/muenzpraeger/create-lwc-app/blob/main/packages/lwc-webpack-plugin/src/loader.ts#L8-L9

Running my own tests and will report back.

Aside: the way LWC works I haven't been able to get them to work with a Plug'N'Play nodeLinker (Yarn 3). The pnpapi needs to be utilized to declare these virtual modules as safe.

Confirmed: adding a loader-utils: 2.0.0 resolution will indeed allow a web-dev-server compile.

[nolanlawson]

There is an upcoming release of lwc-webpack-plugin where we pin the dep for loader-utils to v1.4.0. In the meantime you could edit your yarn resolutions to that version to work around it.

[jonshipman]

For posterity, here's a conversion from npx create-lwc-app to remove lwc-services.

https://github.com/jonshipman/create-lwc-app-serviceless

This should "just work" after a yarn install. Setup to be zero-install if you're running yarn cherry.