mirror of
https://github.com/jlengrand/open-wc.git
synced 2026-03-10 08:31:19 +00:00
chore: move webpack tools into the legacy repo
This commit is contained in:
Thomas Allmer
36
README.md
36
README.md
@@ -47,25 +47,23 @@ For more details please visit us at [open-wc.org](https://open-wc.org).
|
||||
|
||||
## Packages
|
||||
|
||||
| Package | Version | Description |
|
||||
| ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------- |
|
||||
| [building-rollup](./packages/building-rollup) | [](https://www.npmjs.com/package/@open-wc/building-rollup) | Default configuration for working with rollup. |
|
||||
| [building-webpack](./packages/building-webpack) | [](https://www.npmjs.com/package/@open-wc/building-webpack) | Default configuration for working with webpack. |
|
||||
| [chai-dom-equals](./packages/chai-dom-equals) | [](https://www.npmjs.com/package/@open-wc/chai-dom-equals) | Chai Plugin to compare dom and shadow dom trees. Part of open-wc recommendations. |
|
||||
| [create](./packages/create) | [](https://www.npmjs.com/package/@open-wc/create) | Scaffold web components following open-wc recommendations. |
|
||||
| [demoing-storybook](./packages/demoing-storybook) | [](https://www.npmjs.com/package/@open-wc/demoing-storybook) | Storybook configuration following open-wc recommendations. |
|
||||
| [eslint-config](./packages/eslint-config) | [](https://www.npmjs.com/package/@open-wc/eslint-config) | Eslint configuration following open-wc recommendations. |
|
||||
| [es-dev-server](./packages/es-dev-server) | [](https://www.npmjs.com/package/es-dev-server) | Development server for modern web apps. |
|
||||
| [polyfills-loader](./packages/polyfills-loader) | [](https://www.npmjs.com/package/@open-wc/polyfills-loader) | Load web component polyfills using dynamic imports. |
|
||||
| [prettier-config](./packages/prettier-config) | [](https://www.npmjs.com/package/@open-wc/prettier-config) | Prettier configuration following open-wc recommendations. |
|
||||
| [scoped-elements](./packages/scoped-elements) | [](https://www.npmjs.com/package/@open-wc/scoped-elements) | Auto define custom elements to scope them and avoid the name collision. |
|
||||
| [semantic-dom-diff](./packages/semantic-dom-diff) | [](https://www.npmjs.com/package/@open-wc/semantic-dom-diff) | To compare dom and shadow dom trees. Part of open-wc recommendations. |
|
||||
| [testing](./packages/testing) | [](https://www.npmjs.com/package/@open-wc/testing) | Testing following open-wc recommendations. |
|
||||
| [testing-helpers](./packages/testing-helpers) | [](https://www.npmjs.com/package/@open-wc/testing-helpers) | Testing Helpers following open-wc recommendations. |
|
||||
| [testing-karma](./packages/testing-karma) | [](https://www.npmjs.com/package/@open-wc/testing-karma) | Testing with Karma following open-wc recommendations. |
|
||||
| [testing-karma-bs](./packages/testing-karma-bs) | [](https://www.npmjs.com/package/@open-wc/testing-karma-bs) | Testing with Karma using Browserstack following open-wc recommendations. |
|
||||
| [testing-wallaby](./packages/testing-wallaby) | [](https://www.npmjs.com/package/@open-wc/testing-wallaby) | Testing with wallaby following open-wc recommendations. |
|
||||
| [webpack-import-meta-loader](./packages/webpack-import-meta-loader) | [](https://www.npmjs.com/package/@open-wc/webpack-import-meta-loader) | Webpack loader plugin to support import.meta. |
|
||||
| Package | Version | Description |
|
||||
| ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
|
||||
| [building-rollup](./packages/building-rollup) | [](https://www.npmjs.com/package/@open-wc/building-rollup) | Default configuration for working with rollup. |
|
||||
| [chai-dom-equals](./packages/chai-dom-equals) | [](https://www.npmjs.com/package/@open-wc/chai-dom-equals) | Chai Plugin to compare dom and shadow dom trees. Part of open-wc recommendations. |
|
||||
| [create](./packages/create) | [](https://www.npmjs.com/package/@open-wc/create) | Scaffold web components following open-wc recommendations. |
|
||||
| [demoing-storybook](./packages/demoing-storybook) | [](https://www.npmjs.com/package/@open-wc/demoing-storybook) | Storybook configuration following open-wc recommendations. |
|
||||
| [eslint-config](./packages/eslint-config) | [](https://www.npmjs.com/package/@open-wc/eslint-config) | Eslint configuration following open-wc recommendations. |
|
||||
| [es-dev-server](./packages/es-dev-server) | [](https://www.npmjs.com/package/es-dev-server) | Development server for modern web apps. |
|
||||
| [polyfills-loader](./packages/polyfills-loader) | [](https://www.npmjs.com/package/@open-wc/polyfills-loader) | Load web component polyfills using dynamic imports. |
|
||||
| [prettier-config](./packages/prettier-config) | [](https://www.npmjs.com/package/@open-wc/prettier-config) | Prettier configuration following open-wc recommendations. |
|
||||
| [scoped-elements](./packages/scoped-elements) | [](https://www.npmjs.com/package/@open-wc/scoped-elements) | Auto define custom elements to scope them and avoid the name collision. |
|
||||
| [semantic-dom-diff](./packages/semantic-dom-diff) | [](https://www.npmjs.com/package/@open-wc/semantic-dom-diff) | To compare dom and shadow dom trees. Part of open-wc recommendations. |
|
||||
| [testing](./packages/testing) | [](https://www.npmjs.com/package/@open-wc/testing) | Testing following open-wc recommendations. |
|
||||
| [testing-helpers](./packages/testing-helpers) | [](https://www.npmjs.com/package/@open-wc/testing-helpers) | Testing Helpers following open-wc recommendations. |
|
||||
| [testing-karma](./packages/testing-karma) | [](https://www.npmjs.com/package/@open-wc/testing-karma) | Testing with Karma following open-wc recommendations. |
|
||||
| [testing-karma-bs](./packages/testing-karma-bs) | [](https://www.npmjs.com/package/@open-wc/testing-karma-bs) | Testing with Karma using Browserstack following open-wc recommendations. |
|
||||
| [testing-wallaby](./packages/testing-wallaby) | [](https://www.npmjs.com/package/@open-wc/testing-wallaby) | Testing with wallaby following open-wc recommendations. |
|
||||
|
||||
## Contact
|
||||
|
||||
|
||||
@@ -38,4 +38,4 @@ We are still in the process of investigating and documenting our recommendations
|
||||
|
||||
## Webpack
|
||||
|
||||
We recommend [rollup](https://rollupjs.org/guide/en/) as a build tool. It is designed specifically for standard es modules and it's very easy to use. But sometimes you are not in control of choosing the tools to use on a project, and you need to make things work with other tools. For webpack, we also have a [standard config](https://github.com/open-wc/open-wc/tree/master/packages/building-webpack) which can be used to build apps with web components.
|
||||
We recommend [rollup](https://rollupjs.org/guide/en/) as a build tool. It is designed specifically for standard es modules and it's very easy to use. But sometimes you are not in control of choosing the tools to use on a project, and you need to make things work with other tools. For webpack, we have a legacy [standard config](https://github.com/open-wc/legacy/tree/master/packages/building-webpack) which can be used to build apps with web components.
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,416 +1 @@
|
||||
# Webpack
|
||||
|
||||
Webpack configuration to help you get started building modern web applications. You write modern javascript using the latest browser features, webpack will optimize your code for production ensure it runs on all supported browsers.
|
||||
|
||||
[//]: # 'AUTO INSERT HEADER PREPUBLISH'
|
||||
|
||||
## Configuration
|
||||
|
||||
The input for webpack is the same `index.html` you use for development. Any module scripts in your index are run through webpack and your index is updated with the output from rollup.
|
||||
|
||||
See 'config features' for all details. See the extending section for customization, such as supporting non-standard syntax or adding babel plugins.
|
||||
|
||||
## Setup
|
||||
|
||||
### New project
|
||||
|
||||
```bash
|
||||
npm init @open-wc
|
||||
```
|
||||
|
||||
### Existing project
|
||||
|
||||
```bash
|
||||
npm init @open-wc
|
||||
# Upgrade > Building > Webpack
|
||||
```
|
||||
|
||||
### Manual setup
|
||||
|
||||
1. Install the required dependencies:
|
||||
|
||||
```bash
|
||||
npm i -D @open-wc/building-webpack webpack webpack-cli es-dev-server
|
||||
```
|
||||
|
||||
2. Create a file called `webpack.config.js` and pass in your app's js entry point and index.html. Pick the config you need below:
|
||||
|
||||
```javascript
|
||||
const path = require('path');
|
||||
const { createDefaultConfig } = require('@open-wc/building-webpack');
|
||||
|
||||
// if you need to support IE11 use `createCompatibilityConfig` instead.
|
||||
// const { createCompatibilityConfig } = require('@open-wc/building-webpack');
|
||||
// module.exports = createCompatibilityConfig({
|
||||
// input: path.resolve(__dirname, './index.html'),
|
||||
// });
|
||||
|
||||
module.exports = createDefaultConfig({
|
||||
input: path.resolve(__dirname, './index.html'),
|
||||
});
|
||||
```
|
||||
|
||||
3. Create an `index.html`:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head></head>
|
||||
<body>
|
||||
<your-app></your-app>
|
||||
|
||||
<script type="module" src="./src/your-app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
We use [webpack-index-html-plugin](https://github.com/open-wc/open-wc/tree/master/packages/webpack-index-html-plugin). Contrary to other webpack plugins, you **do** need to include your app's module entrypoint in your `index.html`. This allows you to use the same index during development and when building.
|
||||
|
||||
4. Add the following commands to your `package.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"build": "webpack --mode production",
|
||||
"start:build": "es-dev-server --app-index dist/index.html --open"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- `start` runs your app for development, reloading on file changes
|
||||
- `start:build` runs your app after it has been built using the build command
|
||||
- `build` builds your app and outputs it in your `dist` directory
|
||||
|
||||
## Browser support
|
||||
|
||||
`createDefaultConfig` creates a single build of your app for modern browsers (by default last 2 of major browsers). This is recommended if you only need to support modern browsers, otherwise you will need to ship compatibility code for browsers which don't need it.
|
||||
|
||||
`createCompatibilityConfig` creates two builds of your app. A modern build like the above, and a legacy build for IE11. Additional code is injected to load polyfills and the correct version of your app. This is recommended if you need to support IE11.
|
||||
|
||||
## Config features
|
||||
|
||||
All configs:
|
||||
|
||||
- resolve bare imports (`import { html } from 'lit-html'`)
|
||||
- preserve `import.meta.url` value from before bundling
|
||||
- minify + treeshake js
|
||||
- minify html and css in template literals
|
||||
|
||||
`createDefaultConfig`:
|
||||
|
||||
- single build output
|
||||
- compatible with any browser which supports Web Components
|
||||
|
||||
`createCompatibilityConfig`:
|
||||
|
||||
- Two build outputs:
|
||||
- Modern:
|
||||
- compatible with modern browsers (default: last 2 chrome, firefox safari and edge)
|
||||
- does not penalize users with modern browser with compatibility code for IE11
|
||||
- Legacy:
|
||||
- compatible down to IE11
|
||||
- babel transform down to IE11 (es5)
|
||||
- core js babel polyfills (`Array.from`, `String.prototype.includes` etc.)
|
||||
- webcomponentsjs polyfills
|
||||
- URL polyfill
|
||||
- fetch polyfill
|
||||
|
||||
See below for more configuration options.
|
||||
|
||||
## Customizing the babel config
|
||||
|
||||
You can define your own babel plugins by adding a `.babelrc` or `babel.config.js` to your project. See [babeljs config](https://babeljs.io/docs/en/configuration) for more information.
|
||||
|
||||
For example to add support for class properties:
|
||||
|
||||
```json
|
||||
{
|
||||
"plugins": ["@babel/plugin-proposal-class-properties"]
|
||||
}
|
||||
```
|
||||
|
||||
## Adjusting browser support for the modern build
|
||||
|
||||
The legacy build targets IE11, which is the earliest browser supported by the webcomponents polyfill. For the modern build we target the lates 2 versions of the major browsers (chrome, firefox, safari and edge).
|
||||
|
||||
You can adjust this by adding a [browserslist](https://github.com/browserslist/browserslist) configuration. For example by adding a `.browserslistrc` file to your project, or adding an entry to your package.json. See the [browserslist documentation](https://github.com/browserslist/browserslist) for more information.
|
||||
|
||||
> Note: you should not add IE11 or other very early browsers as a target in your browserslist, as it would result in a broken modern build because it makes some assumptions around browser support. Use the `--legacy` flag for legacy builds.
|
||||
|
||||
## Extending the webpack config
|
||||
|
||||
A webpack config is an object. To extend it, we recommend using `webpack-merge` to ensure plugins are merged correctly. For example to adjust the output folder:
|
||||
|
||||
```javascript
|
||||
const merge = require('webpack-merge');
|
||||
const { createDefaultConfig } = require('@open-wc/building-webpack');
|
||||
|
||||
const config = createDefaultConfig({
|
||||
input: path.resolve(__dirname, './index.html'),
|
||||
});
|
||||
|
||||
module.exports = merge(config, {
|
||||
output: {
|
||||
path: 'build',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
If you use `createCompatibilityConfig`, it is actually an array of configs so that webpack outputs a modern and a legacy build. Simply map over the array to adjust both configs:
|
||||
|
||||
```javascript
|
||||
const merge = require('webpack-merge');
|
||||
const { createCompatibilityConfig } = require('@open-wc/building-webpack');
|
||||
|
||||
const configs = createCompatibilityConfig({
|
||||
input: path.resolve(__dirname, './index.html'),
|
||||
});
|
||||
|
||||
module.exports = configs.map(config =>
|
||||
merge(config, {
|
||||
output: {
|
||||
path: 'build',
|
||||
},
|
||||
}),
|
||||
);
|
||||
```
|
||||
|
||||
### Common extensions
|
||||
|
||||
::: warning
|
||||
Some extensions or plugins add non-native or experimental features to your code. This can be bad for the maintenance of your code in the long term, we therefore don't recommend it unless you know what you're doing.
|
||||
:::
|
||||
|
||||
#### Customizing index.html output
|
||||
|
||||
If you need to customize the output of your `index.html` you can pass extra options to [webpack-index-html-plugin](https://github.com/open-wc/open-wc/tree/master/packages/webpack-index-html-plugin):
|
||||
|
||||
```javascript
|
||||
const merge = require('webpack-merge');
|
||||
const { createDefaultConfig } = require('@open-wc/building-webpack');
|
||||
|
||||
module.exports = createDefaultConfig({
|
||||
input: path.resolve(__dirname, './index.html'),
|
||||
webpackIndexHTMLPlugin: {
|
||||
polyfills: {
|
||||
fetch: false,
|
||||
intersectionObserver: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
See the documentation for all options.
|
||||
|
||||
#### non index.html entrypoint
|
||||
|
||||
By default we look for an `index.html` as entrypoint. If want to use regular entrypoints you will need to provide your `index.html` for output manually:
|
||||
|
||||
```javascript
|
||||
const merge = require('webpack-merge');
|
||||
const { createDefaultConfig } = require('@open-wc/building-webpack');
|
||||
|
||||
module.exports = createDefaultConfig({
|
||||
input: path.resolve(__dirname, './my-app.js'),
|
||||
webpackIndexHTMLPlugin: {
|
||||
template: ({ assets, entries, legacyEntries, variation }) => `
|
||||
<html>
|
||||
<head></head>
|
||||
<body></body>
|
||||
</html>
|
||||
`,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
#### Adding or removing polyfills
|
||||
|
||||
By default we polyfill `core-js`, `webcomponentsjs` and `fetch`. It is possile to add or remove polyfills by passing `webpack-index-html` configuration like above:
|
||||
|
||||
```javascript
|
||||
const merge = require('webpack-merge');
|
||||
const { createDefaultConfig } = require('@open-wc/building-webpack');
|
||||
|
||||
module.exports = createDefaultConfig({
|
||||
input: path.resolve(__dirname, './index.html'),
|
||||
webpackIndexHTMLPlugin: {
|
||||
polyfills: {
|
||||
fetch: false,
|
||||
intersectionObserver: true,
|
||||
customPolyfills: [
|
||||
{
|
||||
name: 'my-feature',
|
||||
test: "'myFeature' in window",
|
||||
path: require.resolve('my-feature-polyfill/dist/bundled.js'),
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
[See the documentation](https://github.com/open-wc/open-wc/tree/master/packages/webpack-index-html-plugin) for more information.
|
||||
|
||||
#### Copy assets
|
||||
|
||||
Web apps often include assets such as css files and images. These are not part of your regular dependency graph, so they need to be copied into the build directory.
|
||||
|
||||
[copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin) is a popular plugin fo this.
|
||||
|
||||
```javascript
|
||||
const path = require('path');
|
||||
const merge = require('webpack-merge');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const { createCompatibilityConfig } = require('@open-wc/building-webpack');
|
||||
|
||||
const configs = createCompatibilityConfig({
|
||||
input: path.resolve(__dirname, './index.html'),
|
||||
});
|
||||
|
||||
// with modern-and-legacy-config, the config is actually an array of configs for a modern and
|
||||
// a legacy build. We don't need to copy files twice, so we aadd the copy job only to the first
|
||||
// config
|
||||
module.exports = [
|
||||
// add plugin to the first config
|
||||
merge(configs[0], {
|
||||
plugins: [new CopyWebpackPlugin(['images/**/*.png'])],
|
||||
}),
|
||||
|
||||
// the second config left untouched
|
||||
configs[1],
|
||||
];
|
||||
```
|
||||
|
||||
#### Support typescript
|
||||
|
||||
Make sure to prevent any compilation done by the typescript compiler `tsconfig.json`, as babel and webpack do this for you:
|
||||
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNEXT",
|
||||
"module": "ESNext"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Within webpack there are two options to add typescript support.
|
||||
|
||||
##### 1. Babel
|
||||
|
||||
We recommend using the babel typescript plugin. Add this to your `.babelrc`:
|
||||
|
||||
```json
|
||||
{
|
||||
"presets": ["@babel/preset-typescript"]
|
||||
}
|
||||
```
|
||||
|
||||
This the fastest method, as it strips away types during babel transformormation of your code. It will not perform any type checking though. We recommend setting up the type checking as part of your linting setup, so that you don't need to run the typechecker during development for faster builds.
|
||||
|
||||
<details>
|
||||
<summary>Supporting decorators</summary>
|
||||
|
||||
::: warning
|
||||
Please note that decorators will add [non standard syntax](#common-extensions) to your code.
|
||||
:::
|
||||
|
||||
```json
|
||||
{
|
||||
"presets": ["@babel/preset-typescript"],
|
||||
// for libraries that support babel decorators (lit-element) use:
|
||||
"plugins": [
|
||||
["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
|
||||
"@babel/plugin-proposal-class-properties"
|
||||
]
|
||||
// for libraries that only support typescript:
|
||||
// "plugins": [
|
||||
// ["@babel/plugin-proposal-decorators", { "legacy": true }],
|
||||
// ["@babel/plugin-proposal-class-properties", { "loose": true }]
|
||||
// ],
|
||||
}
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
##### 2. Plugin
|
||||
|
||||
It is also possible to add the webpack typescript plugin, which does typechecking and compiling for you:
|
||||
|
||||
```javascript
|
||||
const path = require('path');
|
||||
const merge = require('webpack-merge');
|
||||
const { createCompatibilityConfig } = require('@open-wc/building-webpack');
|
||||
|
||||
const configs = createCompatibilityConfig({
|
||||
input: path.resolve(__dirname, './index.html'),
|
||||
});
|
||||
|
||||
module.exports = configs.map(config =>
|
||||
merge(config, {
|
||||
module: {
|
||||
rules: [{ test: /\.ts$/, loader: 'ts-loader' }],
|
||||
},
|
||||
}),
|
||||
);
|
||||
```
|
||||
|
||||
## Progressive Web App
|
||||
|
||||
### Making your app installable
|
||||
|
||||
Make sure your PWA meets the installable criteria, which you can find [here](https://developers.google.com/web/fundamentals/app-install-banners/). You can find a tool to generate your `manifest.json` [here](https://www.pwabuilder.com/generate). When your app has a service worker with a `fetch` handler (generated by this configuration), a `manifest.json`, and is served over HTTPS, your app is ready to be installed.
|
||||
|
||||
### Enabling the service worker
|
||||
|
||||
This configuration will by default generate a service worker for you, using [workbox-webpack-plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin). The service worker will only be generated for production. To opt-in to using this service worker, you can add the following code snippet to your `index.html`:
|
||||
|
||||
```html
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', () => {
|
||||
navigator.serviceWorker.register('./sw.js');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Overriding the workbox config
|
||||
|
||||
If you want to override the default config with your own workbox configuration, you can disable the default workbox configuration by setting `options.plugins.workbox` to false in the `options` object that you pass to `createBasicConfig`, and then you can override the plugins
|
||||
|
||||
```js
|
||||
const merge = require('deepmerge');
|
||||
const { InjectManifest } = require('workbox-webpack-plugin');
|
||||
const createDefaultConfig = require('@open-wc/building-webpack');
|
||||
|
||||
const defaultConfig = createDefaultConfig({
|
||||
plugins: {
|
||||
workbox: false,
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = merge(defaultConfig, {
|
||||
plugins: [new InjectManifest(/* */)],
|
||||
});
|
||||
```
|
||||
|
||||
You can find the options for configuring Workbox [here](https://developers.google.com/web/tools/workbox/modules/workbox-build).
|
||||
|
||||
### Disabling service worker generation
|
||||
|
||||
To opt out of using workbox to generate a service worker, you can disabled it by overriding the options in the `createBasicConfig` function:
|
||||
|
||||
```js
|
||||
module.exports = createBasicConfig({
|
||||
plugins: {
|
||||
workbox: false,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### A note on `skipWaiting`
|
||||
|
||||
By default, the service worker generated will _not_ call `skipWaiting`. The reason for this is that it becomes very painful very quickly if you're lazyloading code in your application.
|
||||
|
||||
If you want to add a user-friendly 'Add To Home Screen' experience, you can use the [pwa-update-available](https://github.com/thepassle/pwa-helpers) web component.
|
||||
I moved into the legacy repository [building-webpack](https://github.com/open-wc/legacy/tree/master/packages/building-webpack) we now recommend rollup over webpack.
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
window.__importMeta2 =
|
||||
import.meta.url.startsWith(window.location.origin) &&
|
||||
import.meta.url.endsWith('/a/b/import-meta-test-2.js');
|
||||
@@ -1,54 +0,0 @@
|
||||
import { LitElement, html, css } from 'lit-element';
|
||||
import './demo-component.js';
|
||||
|
||||
// partial css trips up the minifier
|
||||
const fontSize = css`
|
||||
16
|
||||
`;
|
||||
|
||||
const fontMd = css`
|
||||
font-size: ${fontSize}px;
|
||||
`;
|
||||
|
||||
class DemoApp extends LitElement {
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
color: black;
|
||||
background-color: white;
|
||||
${fontMd}
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<p>Demo app</p>
|
||||
<demo-component></demo-component>
|
||||
<lazy-component></lazy-component>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('demo-app', DemoApp);
|
||||
|
||||
const cssText = DemoApp.styles.cssText.replace(/\s/g, '');
|
||||
const foo = { bar: 'lorem ipsum' };
|
||||
const loremIpsum = undefined;
|
||||
|
||||
window.__optionalChaining = foo?.bar === 'lorem ipsum' && foo?.bar?.loremIpsum === undefined;
|
||||
window.__nullishCoalescing = (loremIpsum ?? 'lorem ipsum') === 'lorem ipsum';
|
||||
window.__partialCSS = cssText.includes('font-size:16px') && cssText.includes('display:block');
|
||||
window.__litElement = (async () => {
|
||||
await import('./lazy-component.js');
|
||||
const app = document.body.querySelector('demo-app');
|
||||
const demoComponent = app.shadowRoot.querySelector('demo-component');
|
||||
const lazyComponent = app.shadowRoot.querySelector('lazy-component');
|
||||
|
||||
return (
|
||||
app.shadowRoot.innerHTML.includes('<p>Demo app</p>') &&
|
||||
demoComponent.shadowRoot.innerHTML.includes('<p>Demo component</p>') &&
|
||||
lazyComponent.shadowRoot.innerHTML.includes('<p>Lazy component</p>')
|
||||
);
|
||||
})();
|
||||
@@ -1,18 +0,0 @@
|
||||
/* eslint-disable class-methods-use-this, import/no-extraneous-dependencies */
|
||||
import { LitElement, html, css } from 'lit-element';
|
||||
|
||||
class DemoComponent extends LitElement {
|
||||
static get styles() {
|
||||
return css`
|
||||
p {
|
||||
color: blue;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html` <p>Demo component</p> `;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('demo-component', DemoComponent);
|
||||
@@ -1,23 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<meta http-equiv="expires" content="0">
|
||||
|
||||
<title>My Demo</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Static content in index.html is preserved</h1>
|
||||
|
||||
<demo-app></demo-app>
|
||||
|
||||
<div id="test"></div>
|
||||
|
||||
<script type="module" src="./index.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,22 +0,0 @@
|
||||
import './demo-app.js';
|
||||
import './syntax.js';
|
||||
|
||||
(async () => {
|
||||
window.__tests = {
|
||||
partialCSS: window.__partialCSS || false,
|
||||
litElement: (await window.__litElement) || false,
|
||||
startsWith: window.__startsWith || false,
|
||||
map: window.__map || false,
|
||||
importMeta: window.__importMeta || false,
|
||||
importMeta2: window.__importMeta2 || false,
|
||||
asyncFunction: (await window.__asyncFunction) || false,
|
||||
forOf: window.__forOf || false,
|
||||
optionalChaining: window.__optionalChaining || false,
|
||||
nullishCoalescing: window.__nullishCoalescing || false,
|
||||
};
|
||||
document.getElementById('test').innerHTML = `<pre>${JSON.stringify(
|
||||
window.__tests,
|
||||
null,
|
||||
2,
|
||||
)}</pre>`;
|
||||
})();
|
||||
@@ -1,17 +0,0 @@
|
||||
import { LitElement, html, css } from 'lit-element';
|
||||
|
||||
class LazyComponent extends LitElement {
|
||||
static get styles() {
|
||||
return css`
|
||||
p {
|
||||
color: red;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html` <p>Lazy component</p> `;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('lazy-component', LazyComponent);
|
||||
@@ -1,27 +0,0 @@
|
||||
import './a/b/import-meta-test-2.js';
|
||||
|
||||
async function asyncFunction() {
|
||||
await new Promise(resolve => setTimeout(resolve, 1));
|
||||
return true;
|
||||
}
|
||||
|
||||
function forOf() {
|
||||
const map = new Map();
|
||||
map.set('a', 1);
|
||||
map.set('2', 2);
|
||||
let total = 0;
|
||||
for (const [k, v] of map) {
|
||||
total += v;
|
||||
}
|
||||
return total;
|
||||
}
|
||||
|
||||
console.log('async function compiled to: ', asyncFunction.toString());
|
||||
console.log('forOf function compiled to: ', forOf.toString());
|
||||
|
||||
window.__startsWith = 'foo'.startsWith('fo');
|
||||
window.__map = new Map().set('foo', 'bar').get('foo') === 'bar';
|
||||
window.__importMeta =
|
||||
import.meta.url.startsWith(window.location.origin) && import.meta.url.endsWith('syntax.js');
|
||||
window.__asyncFunction = asyncFunction();
|
||||
window.__forOf = forOf() === 3;
|
||||
@@ -1,19 +0,0 @@
|
||||
const path = require('path');
|
||||
const merge = require('webpack-merge');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const createDefaultConfigs = require('../../modern-and-legacy-config');
|
||||
|
||||
const configs = createDefaultConfigs({
|
||||
input: path.resolve(__dirname, './index.html'),
|
||||
});
|
||||
|
||||
if (Array.isArray(configs)) {
|
||||
module.exports = [
|
||||
merge(configs[0], {
|
||||
plugins: [new CopyWebpackPlugin(['demo/**/*.txt'])],
|
||||
}),
|
||||
configs[1],
|
||||
];
|
||||
} else {
|
||||
module.exports = configs;
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
const path = require('path');
|
||||
const merge = require('webpack-merge');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const createDefaultConfig = require('../../modern-config');
|
||||
|
||||
const defaultConfig = createDefaultConfig({
|
||||
input: path.resolve(__dirname, './index.html'),
|
||||
});
|
||||
|
||||
module.exports = merge(defaultConfig, {
|
||||
plugins: [new CopyWebpackPlugin(['demo/**/*.txt'])],
|
||||
});
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"plugins": [
|
||||
["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
|
||||
"@babel/plugin-proposal-class-properties"
|
||||
],
|
||||
"presets": ["@babel/preset-typescript"]
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
console.log(import.meta.url);
|
||||
window.__importMeta2 =
|
||||
import.meta.url.startsWith(window.location.origin) &&
|
||||
import.meta.url.endsWith('/a/b/import-meta-test-2.ts');
|
||||
@@ -1,51 +0,0 @@
|
||||
import { LitElement, html, css, customElement } from 'lit-element';
|
||||
import './demo-component.ts';
|
||||
|
||||
// partial css trips up the minifier
|
||||
const fontSize = css`
|
||||
16
|
||||
`;
|
||||
|
||||
const fontMd = css`
|
||||
font-size: ${fontSize}px;
|
||||
`;
|
||||
|
||||
@customElement('demo-app')
|
||||
class DemoApp extends LitElement {
|
||||
static styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
color: black;
|
||||
background-color: white;
|
||||
${fontMd}
|
||||
}
|
||||
`;
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<p>Demo app</p>
|
||||
<demo-component></demo-component>
|
||||
<lazy-component></lazy-component>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
const cssText = DemoApp.styles.cssText.replace(/\s/g, '');
|
||||
const foo = { bar: 'lorem ipsum' };
|
||||
const loremIpsum = undefined;
|
||||
|
||||
window.__optionalChaining = foo?.bar === 'lorem ipsum' && foo?.bar?.loremIpsum === undefined;
|
||||
window.__nullishCoalescing = (loremIpsum ?? 'lorem ipsum') === 'lorem ipsum';
|
||||
window.__partialCSS = cssText.includes('font-size:16px') && cssText.includes('display:block');
|
||||
window.__litElement = (async () => {
|
||||
await import('./lazy-component.ts');
|
||||
const app = document.body.querySelector('demo-app');
|
||||
const demoComponent = app.shadowRoot.querySelector('demo-component');
|
||||
const lazyComponent = app.shadowRoot.querySelector('lazy-component');
|
||||
|
||||
return (
|
||||
app.shadowRoot.innerHTML.includes('<p>Demo app</p>') &&
|
||||
demoComponent.shadowRoot.innerHTML.includes('<p>Demo component</p>') &&
|
||||
lazyComponent.shadowRoot.innerHTML.includes('<p>Lazy component</p>')
|
||||
);
|
||||
})();
|
||||
@@ -1,17 +0,0 @@
|
||||
/* eslint-disable class-methods-use-this, import/no-extraneous-dependencies */
|
||||
import { LitElement, html, css, customElement } from 'lit-element';
|
||||
|
||||
@customElement('demo-component')
|
||||
class DemoComponent extends LitElement {
|
||||
static styles = css`
|
||||
p {
|
||||
color: blue;
|
||||
}
|
||||
`;
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<p>Demo component</p>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<meta http-equiv="expires" content="0">
|
||||
|
||||
<title>My Demo</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Static content in index.html is preserved</h1>
|
||||
|
||||
<demo-app></demo-app>
|
||||
|
||||
<div id="test"></div>
|
||||
|
||||
<script type="module" src="./index.ts"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,22 +0,0 @@
|
||||
import './demo-app.ts';
|
||||
import './syntax.ts';
|
||||
|
||||
(async () => {
|
||||
window.__tests = {
|
||||
partialCSS: window.__partialCSS || false,
|
||||
litElement: (await window.__litElement) || false,
|
||||
startsWith: window.__startsWith || false,
|
||||
map: window.__map || false,
|
||||
importMeta: window.__importMeta || false,
|
||||
importMeta2: window.__importMeta2 || false,
|
||||
asyncFunction: (await window.__asyncFunction) || false,
|
||||
forOf: window.__forOf || false,
|
||||
optionalChaining: window.__optionalChaining || false,
|
||||
nullishCoalescing: window.__nullishCoalescing || false,
|
||||
};
|
||||
document.getElementById('test').innerHTML = `<pre>${JSON.stringify(
|
||||
window.__tests,
|
||||
null,
|
||||
2,
|
||||
)}</pre>`;
|
||||
})();
|
||||
@@ -1,16 +0,0 @@
|
||||
import { LitElement, html, css, customElement } from 'lit-element';
|
||||
|
||||
@customElement('lazy-component')
|
||||
class LazyComponent extends LitElement {
|
||||
static styles = css`
|
||||
p {
|
||||
color: red;
|
||||
}
|
||||
`;
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<p>Lazy component</p>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import './a/b/import-meta-test-2.ts';
|
||||
|
||||
async function asyncFunction(): Promise<boolean> {
|
||||
await new Promise(resolve => setTimeout(resolve, 1));
|
||||
return true;
|
||||
}
|
||||
|
||||
function forOf() {
|
||||
const map = new Map<string, number>();
|
||||
map.set('a', 1);
|
||||
map.set('2', 2);
|
||||
let total = 0;
|
||||
for (const [k, v] of map) {
|
||||
total += v;
|
||||
}
|
||||
return total;
|
||||
}
|
||||
|
||||
console.log('async function compiled to: ', asyncFunction.toString());
|
||||
console.log('forOf function compiled to: ', forOf.toString());
|
||||
|
||||
window.__startsWith = 'foo'.startsWith('fo');
|
||||
window.__map = new Map().set('foo', 'bar').get('foo') === 'bar';
|
||||
window.__importMeta =
|
||||
import.meta.url.startsWith(window.location.origin) && import.meta.url.endsWith('syntax.ts');
|
||||
window.__asyncFunction = asyncFunction();
|
||||
window.__forOf = forOf() === 3;
|
||||
@@ -1,19 +0,0 @@
|
||||
const path = require('path');
|
||||
const merge = require('webpack-merge');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const createDefaultConfigs = require('../../modern-and-legacy-config');
|
||||
|
||||
const configs = createDefaultConfigs({
|
||||
input: path.resolve(__dirname, './index.html'),
|
||||
});
|
||||
|
||||
if (Array.isArray(configs)) {
|
||||
module.exports = [
|
||||
merge(configs[0], {
|
||||
plugins: [new CopyWebpackPlugin(['demo/**/*.txt'])],
|
||||
}),
|
||||
configs[1],
|
||||
];
|
||||
} else {
|
||||
module.exports = configs;
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
const path = require('path');
|
||||
const merge = require('webpack-merge');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const createDefaultConfig = require('../../modern-config');
|
||||
|
||||
const defaultConfig = createDefaultConfig({
|
||||
input: path.resolve(__dirname, './index.html'),
|
||||
});
|
||||
|
||||
module.exports = merge(defaultConfig, {
|
||||
plugins: [new CopyWebpackPlugin(['demo/**/*.txt'])],
|
||||
});
|
||||
@@ -1,4 +0,0 @@
|
||||
const createDefaultConfig = require('./modern-config.js');
|
||||
const createCompatibilityConfig = require('./modern-and-legacy-config.js');
|
||||
|
||||
module.exports = { createDefaultConfig, createCompatibilityConfig };
|
||||
@@ -1,191 +0,0 @@
|
||||
const { findSupportedBrowsers } = require('@open-wc/building-utils');
|
||||
const customMinifyCSS = require('@open-wc/building-utils/custom-minify-css');
|
||||
const { GenerateSW } = require('workbox-webpack-plugin');
|
||||
const path = require('path');
|
||||
const WebpackIndexHTMLPlugin = require('@open-wc/webpack-index-html-plugin');
|
||||
const CleanWebpackPlugin = require('clean-webpack-plugin');
|
||||
const TerserPlugin = require('terser-webpack-plugin');
|
||||
const merge = require('webpack-merge');
|
||||
const getDefaultMode = require('./src/get-default-mode');
|
||||
|
||||
const defaultOptions = {
|
||||
// default mode is set based on --mode parameter, or default
|
||||
// production. this can be overwritten manually in the config
|
||||
mode: getDefaultMode(),
|
||||
input: './index.html',
|
||||
plugins: {
|
||||
indexHTML: true,
|
||||
workbox: true,
|
||||
},
|
||||
};
|
||||
|
||||
/* eslint-disable-next-line no-shadow */
|
||||
function createConfig(options, legacy) {
|
||||
if (options.entry) {
|
||||
/* eslint-disable-next-line no-console */
|
||||
console.warn(
|
||||
'[@open-wc/building-webpack]: options.entry is deprecated. Use options.input instead.',
|
||||
);
|
||||
}
|
||||
|
||||
const firstConfig = legacy;
|
||||
const production = options.mode === 'production';
|
||||
const inputPrefix = legacy ? 'legacy/' : '';
|
||||
|
||||
const outputFilename = `${inputPrefix}${
|
||||
production ? '[contenthash].js' : '[name].development.js'
|
||||
}`;
|
||||
const outputChunkFilename = `${inputPrefix}${
|
||||
production ? '[contenthash].js' : 'chunk-[id].development.js'
|
||||
}`;
|
||||
|
||||
return {
|
||||
entry: options.input || options.entry,
|
||||
|
||||
output: {
|
||||
filename: outputFilename,
|
||||
chunkFilename: outputChunkFilename,
|
||||
path: path.resolve(process.cwd(), `dist`),
|
||||
},
|
||||
|
||||
mode: options.mode,
|
||||
|
||||
devtool: 'cheap-module-source-map',
|
||||
|
||||
// don't polyfill any node built-in libraries
|
||||
node: false,
|
||||
|
||||
resolve: {
|
||||
mainFields: [
|
||||
// current leading de-facto standard - see https://github.com/rollup/rollup/wiki/pkg.module
|
||||
'module',
|
||||
// previous de-facto standard, superceded by `module`, but still in use by some packages
|
||||
'jsnext:main',
|
||||
// standard package.json fields
|
||||
'browser',
|
||||
'main',
|
||||
],
|
||||
modules: ['node_modules', 'web_modules'],
|
||||
},
|
||||
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$|\.ts$/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
|
||||
options: {
|
||||
plugins: [
|
||||
require.resolve('@babel/plugin-syntax-dynamic-import'),
|
||||
require.resolve('@babel/plugin-syntax-import-meta'),
|
||||
production && [
|
||||
require.resolve('babel-plugin-template-html-minifier'),
|
||||
{
|
||||
modules: {
|
||||
'lit-html': ['html'],
|
||||
'lit-element': ['html', { name: 'css', encapsulation: 'style' }],
|
||||
},
|
||||
htmlMinifier: {
|
||||
collapseWhitespace: true,
|
||||
conservativeCollapse: true,
|
||||
removeComments: true,
|
||||
caseSensitive: true,
|
||||
minifyCSS: customMinifyCSS,
|
||||
},
|
||||
},
|
||||
],
|
||||
// webpack does not support import.meta.url yet, so we rewrite them in babel
|
||||
[require.resolve('babel-plugin-bundled-import-meta'), { importStyle: 'baseURI' }],
|
||||
].filter(_ => !!_),
|
||||
|
||||
presets: [
|
||||
[
|
||||
require.resolve('@babel/preset-env'),
|
||||
{
|
||||
targets: legacy ? ['ie 11'] : findSupportedBrowsers(),
|
||||
// preset-env compiles template literals for safari 12 due to a small bug which
|
||||
// doesn't affect most use cases. for example lit-html handles it: (https://github.com/Polymer/lit-html/issues/575)
|
||||
exclude: legacy ? undefined : ['@babel/plugin-transform-template-literals'],
|
||||
useBuiltIns: false,
|
||||
modules: false,
|
||||
bugfixes: true,
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
].filter(_ => !!_),
|
||||
},
|
||||
|
||||
optimization: {
|
||||
minimizer: [
|
||||
production &&
|
||||
new TerserPlugin({
|
||||
terserOptions: {
|
||||
output: {
|
||||
comments: false,
|
||||
},
|
||||
},
|
||||
parallel: true,
|
||||
sourceMap: true,
|
||||
}),
|
||||
].filter(_ => !!_),
|
||||
},
|
||||
|
||||
plugins: [
|
||||
// @ts-ignore
|
||||
firstConfig && new CleanWebpackPlugin(),
|
||||
|
||||
options.plugins.indexHTML &&
|
||||
new WebpackIndexHTMLPlugin(
|
||||
merge(
|
||||
{
|
||||
multiBuild: true,
|
||||
legacy,
|
||||
polyfills: {
|
||||
coreJs: true,
|
||||
regeneratorRuntime: true,
|
||||
webcomponents: true,
|
||||
fetch: true,
|
||||
},
|
||||
},
|
||||
options.webpackIndexHTMLPlugin,
|
||||
),
|
||||
),
|
||||
production &&
|
||||
options.plugins.workbox &&
|
||||
new GenerateSW({
|
||||
exclude: [/legacy\/.*.js/],
|
||||
// for spa client side routing, always return index.html
|
||||
navigateFallback: '/index.html',
|
||||
// where to output the generated sw
|
||||
swDest: 'sw.js',
|
||||
}),
|
||||
].filter(_ => !!_),
|
||||
|
||||
devServer: {
|
||||
contentBase: process.cwd(),
|
||||
compress: true,
|
||||
port: 8080,
|
||||
historyApiFallback: false,
|
||||
stats: {
|
||||
stats: 'errors-only',
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = userOptions => {
|
||||
const options = {
|
||||
...defaultOptions,
|
||||
...userOptions,
|
||||
plugins: {
|
||||
...defaultOptions.plugins,
|
||||
...(userOptions.plugins || {}),
|
||||
},
|
||||
};
|
||||
|
||||
return [createConfig(options, true), createConfig(options, false)];
|
||||
};
|
||||
@@ -1,163 +0,0 @@
|
||||
const { findSupportedBrowsers } = require('@open-wc/building-utils');
|
||||
const WebpackIndexHTMLPlugin = require('@open-wc/webpack-index-html-plugin');
|
||||
const customMinifyCSS = require('@open-wc/building-utils/custom-minify-css');
|
||||
const { GenerateSW } = require('workbox-webpack-plugin');
|
||||
const path = require('path');
|
||||
const CleanWebpackPlugin = require('clean-webpack-plugin');
|
||||
const TerserPlugin = require('terser-webpack-plugin');
|
||||
const getDefaultMode = require('./src/get-default-mode');
|
||||
|
||||
const defaultOptions = {
|
||||
// default mode is set based on --mode parameter, or default
|
||||
// production. this can be overwritten manually in the config
|
||||
mode: getDefaultMode(),
|
||||
input: './index.html',
|
||||
plugins: {
|
||||
indexHTML: true,
|
||||
workbox: true,
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = userOptions => {
|
||||
const options = {
|
||||
...defaultOptions,
|
||||
...userOptions,
|
||||
plugins: {
|
||||
...defaultOptions.plugins,
|
||||
...(userOptions.plugins || {}),
|
||||
},
|
||||
};
|
||||
|
||||
const production = options.mode === 'production';
|
||||
|
||||
if (options.entry) {
|
||||
/* eslint-disable-next-line no-console */
|
||||
console.warn(
|
||||
'[@open-wc/building-webpack]: options.entry is deprecated. Use options.input instead.',
|
||||
);
|
||||
}
|
||||
|
||||
const outputFilename = production ? '[contenthash].js' : '[name].development.js';
|
||||
const outputChunkFilename = production ? '[contenthash].js' : 'chunk-[id].development.js';
|
||||
|
||||
return {
|
||||
entry: options.input || options.entry,
|
||||
|
||||
output: {
|
||||
filename: outputFilename,
|
||||
chunkFilename: outputChunkFilename,
|
||||
path: path.resolve(process.cwd(), 'dist'),
|
||||
},
|
||||
|
||||
mode: options.mode,
|
||||
|
||||
devtool: 'cheap-module-source-map',
|
||||
|
||||
// don't polyfill any node built-in libraries
|
||||
node: false,
|
||||
|
||||
resolve: {
|
||||
mainFields: [
|
||||
// current leading de-facto standard - see https://github.com/rollup/rollup/wiki/pkg.module
|
||||
'module',
|
||||
// previous de-facto standard, superceded by `module`, but still in use by some packages
|
||||
'jsnext:main',
|
||||
// standard package.json fields
|
||||
'browser',
|
||||
'main',
|
||||
],
|
||||
modules: ['node_modules', 'web_modules'],
|
||||
},
|
||||
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$|.ts$/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
plugins: [
|
||||
require.resolve('@babel/plugin-syntax-dynamic-import'),
|
||||
require.resolve('@babel/plugin-syntax-import-meta'),
|
||||
production && [
|
||||
require.resolve('babel-plugin-template-html-minifier'),
|
||||
{
|
||||
modules: {
|
||||
'lit-html': ['html'],
|
||||
'lit-element': ['html', { name: 'css', encapsulation: 'style' }],
|
||||
},
|
||||
htmlMinifier: {
|
||||
collapseWhitespace: true,
|
||||
conservativeCollapse: true,
|
||||
removeComments: true,
|
||||
caseSensitive: true,
|
||||
minifyCSS: customMinifyCSS,
|
||||
},
|
||||
},
|
||||
],
|
||||
// webpack does not support import.meta.url yet, so we rewrite them in babel
|
||||
[require.resolve('babel-plugin-bundled-import-meta'), { importStyle: 'baseURI' }],
|
||||
].filter(_ => !!_),
|
||||
|
||||
presets: [
|
||||
[
|
||||
require.resolve('@babel/preset-env'),
|
||||
{
|
||||
targets: findSupportedBrowsers(),
|
||||
// preset-env compiles template literals for safari 12 due to a small bug which
|
||||
// doesn't affect most use cases. for example lit-html handles it: (https://github.com/Polymer/lit-html/issues/575)
|
||||
exclude: ['@babel/plugin-transform-template-literals'],
|
||||
useBuiltIns: false,
|
||||
modules: false,
|
||||
bugfixes: true,
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
].filter(_ => !!_),
|
||||
},
|
||||
|
||||
optimization: {
|
||||
minimizer: [
|
||||
production &&
|
||||
new TerserPlugin({
|
||||
terserOptions: {
|
||||
output: {
|
||||
comments: false,
|
||||
},
|
||||
},
|
||||
parallel: true,
|
||||
sourceMap: true,
|
||||
}),
|
||||
].filter(_ => !!_),
|
||||
},
|
||||
|
||||
plugins: [
|
||||
// @ts-ignore
|
||||
new CleanWebpackPlugin(),
|
||||
|
||||
new WebpackIndexHTMLPlugin(options.webpackIndexHTMLPlugin),
|
||||
production &&
|
||||
options.plugins.workbox &&
|
||||
new GenerateSW({
|
||||
exclude: [/legacy\/.*.js/],
|
||||
// for spa client side routing, always return index.html
|
||||
navigateFallback: '/index.html',
|
||||
// where to output the generated sw
|
||||
swDest: 'sw.js',
|
||||
}),
|
||||
].filter(_ => !!_),
|
||||
|
||||
devServer: {
|
||||
contentBase: process.cwd(),
|
||||
compress: true,
|
||||
port: 8080,
|
||||
historyApiFallback: true,
|
||||
stats: {
|
||||
stats: 'errors-only',
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
@@ -1,72 +0,0 @@
|
||||
{
|
||||
"name": "@open-wc/building-webpack",
|
||||
"version": "2.13.46",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"description": "Default configuration for working with webpack",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/open-wc/open-wc.git",
|
||||
"directory": "packages/building-webpack"
|
||||
},
|
||||
"author": "open-wc",
|
||||
"homepage": "https://github.com/open-wc/open-wc/tree/master/packages/building-webpack",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"demo:build": "webpack --mode production --config demo/js/webpack.config.js",
|
||||
"demo:build:dev": "webpack --mode development --config demo/js/webpack.config.js",
|
||||
"demo:build:modern": "webpack --mode=production --config demo/js/webpack.modern.config.js",
|
||||
"demo:build:stats": "webpack --mode=production --config demo/js/webpack.modern.config.js --profile --json > build-stats.json",
|
||||
"demo:build:ts": "webpack --mode=production --config demo/ts/webpack.config.js",
|
||||
"demo:build:ts-babel": "webpack --mode=production --config demo/ts-babel/webpack.config.js",
|
||||
"demo:start": "es-dev-server --root-dir dist --open",
|
||||
"demo:webpack-dev": "webpack-dev-server --mode=development --config demo/js/webpack.config.js --open",
|
||||
"demo:webpack-dev:legacy": "webpack-dev-server --mode=development --config demo/js/webpack.config.js --open --legacy",
|
||||
"demo:webpack-dev:modern": "webpack-dev-server --mode=development --config demo/js/webpack.modern.config.js --open",
|
||||
"prepublishOnly": "../../scripts/insert-header.js",
|
||||
"test": "npm run test:node",
|
||||
"test:node": "mocha test/**/*.test.js test/*.test.js"
|
||||
},
|
||||
"files": [
|
||||
"*.js",
|
||||
"dom5-fork",
|
||||
"src"
|
||||
],
|
||||
"keywords": [
|
||||
"open-wc",
|
||||
"webpack",
|
||||
"config"
|
||||
],
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.11.1",
|
||||
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
|
||||
"@babel/plugin-proposal-optional-chaining": "^7.11.0",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
||||
"@babel/plugin-syntax-import-meta": "^7.10.4",
|
||||
"@babel/preset-env": "^7.9.0",
|
||||
"@open-wc/building-utils": "^2.18.3",
|
||||
"@open-wc/webpack-index-html-plugin": "^1.7.14",
|
||||
"babel-loader": "^8.0.0",
|
||||
"babel-plugin-bundled-import-meta": "^0.3.2",
|
||||
"babel-plugin-template-html-minifier": "^4.0.0",
|
||||
"clean-webpack-plugin": "^2.0.0",
|
||||
"copy-webpack-plugin": "^5.0.1",
|
||||
"es-dev-server": "^1.57.8",
|
||||
"terser-webpack-plugin": "^2.3.0",
|
||||
"webpack-merge": "^4.1.5",
|
||||
"workbox-webpack-plugin": "^4.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-proposal-class-properties": "^7.10.4",
|
||||
"@babel/preset-typescript": "^7.8.3",
|
||||
"@babel/register": "^7.9.0",
|
||||
"http-server": "^0.11.1",
|
||||
"ts-loader": "^5.3.3",
|
||||
"webpack": "^4.28.0",
|
||||
"webpack-bundle-analyzer": "^3.0.3",
|
||||
"webpack-cli": "^3.3.9",
|
||||
"webpack-dev-server": "^3.7.1"
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
module.exports = function getDefaultMode() {
|
||||
// webpack standard is to use --mode=production
|
||||
const modeArg = process.argv.find(arg => arg.startsWith('--mode='));
|
||||
if (modeArg) {
|
||||
return modeArg.replace('--mode=', '');
|
||||
}
|
||||
|
||||
// our old convention was --mode production, so we remain backwards compatible with that
|
||||
const indexOf = process.argv.indexOf('--mode');
|
||||
return indexOf === -1 ? 'production' : process.argv[indexOf + 1];
|
||||
};
|
||||
@@ -1,106 +0,0 @@
|
||||
/* eslint-disable global-require, import/no-dynamic-require */
|
||||
const puppeteer = require('puppeteer');
|
||||
const { expect } = require('chai');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const webpack = require('webpack');
|
||||
const rimraf = require('rimraf');
|
||||
const { startServer, createConfig } = require('es-dev-server');
|
||||
|
||||
const rootDir = path.resolve(__dirname, '..', 'dist');
|
||||
const testCases = ['js', 'ts-babel'];
|
||||
|
||||
function compileAsync(config) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const compiler = webpack(config);
|
||||
|
||||
const cb = (err, stats) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
} else {
|
||||
resolve(stats);
|
||||
}
|
||||
};
|
||||
|
||||
compiler.run(cb);
|
||||
});
|
||||
}
|
||||
|
||||
describe('integration tests', () => {
|
||||
let server;
|
||||
let serverConfig;
|
||||
/** @type {import('puppeteer').Browser} */
|
||||
let browser;
|
||||
|
||||
before(async () => {
|
||||
serverConfig = createConfig({
|
||||
port: 8082,
|
||||
rootDir,
|
||||
});
|
||||
|
||||
({ server } = await startServer(serverConfig));
|
||||
browser = await puppeteer.launch();
|
||||
rimraf.sync(rootDir);
|
||||
});
|
||||
|
||||
after(async () => {
|
||||
await browser.close();
|
||||
await new Promise(resolve =>
|
||||
server.close(() => {
|
||||
resolve();
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
testCases.forEach(testCase => {
|
||||
['modern', 'modern-and-legacy'].forEach(mode => {
|
||||
describe(`testcase ${testCase}-${mode}`, function describe() {
|
||||
this.timeout(10000);
|
||||
let page;
|
||||
|
||||
before(async () => {
|
||||
const configName = mode === 'modern' ? 'webpack.modern.config.js' : 'webpack.config.js';
|
||||
const configPath = path.join(__dirname, '..', 'demo', testCase, configName);
|
||||
const config = require(configPath);
|
||||
|
||||
if (Array.isArray(config)) {
|
||||
await compileAsync(config[0]);
|
||||
await compileAsync(config[1]);
|
||||
} else {
|
||||
await compileAsync(config);
|
||||
}
|
||||
|
||||
page = await browser.newPage();
|
||||
await page.goto('http://localhost:8082/', {
|
||||
waitUntil: 'networkidle0',
|
||||
});
|
||||
});
|
||||
|
||||
after(() => {
|
||||
rimraf.sync(rootDir);
|
||||
});
|
||||
|
||||
it('passes the in-browser tests', async () => {
|
||||
// @ts-ignore
|
||||
const browserTests = await page.evaluate(() => window.__tests);
|
||||
expect(browserTests).to.eql({
|
||||
partialCSS: true,
|
||||
litElement: true,
|
||||
startsWith: true,
|
||||
map: true,
|
||||
importMeta: true,
|
||||
importMeta2: true,
|
||||
asyncFunction: true,
|
||||
forOf: true,
|
||||
optionalChaining: true,
|
||||
nullishCoalescing: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('outputs a service worker', () => {
|
||||
expect(fs.existsSync(path.join(rootDir, 'sw.js'))).to.be.true;
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"presets": [[
|
||||
"env",
|
||||
{
|
||||
"targets": {
|
||||
"node": "10"
|
||||
}
|
||||
}
|
||||
]]
|
||||
}
|
||||
@@ -1,226 +0,0 @@
|
||||
# Change Log
|
||||
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [0.4.7](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.4.6...@open-wc/webpack-import-meta-loader@0.4.7) (2020-05-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **webpack-import-meta-loader:** fix a bug in the publicPath logic ([#1677](https://github.com/open-wc/open-wc/issues/1677)) ([f8ff5e8](https://github.com/open-wc/open-wc/commit/f8ff5e8a6bfea75112d2de74e77ebc9a96623a7c))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.4.6](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.4.5...@open-wc/webpack-import-meta-loader@0.4.6) (2020-04-20)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-import-meta-loader
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.4.5](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.4.4...@open-wc/webpack-import-meta-loader@0.4.5) (2020-04-12)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-import-meta-loader
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.4.4](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.4.3...@open-wc/webpack-import-meta-loader@0.4.4) (2020-03-24)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-import-meta-loader
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.4.3](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.4.2...@open-wc/webpack-import-meta-loader@0.4.3) (2020-02-09)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-import-meta-loader
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.4.2](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.4.1...@open-wc/webpack-import-meta-loader@0.4.2) (2020-02-02)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-import-meta-loader
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.4.1](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.4.0...@open-wc/webpack-import-meta-loader@0.4.1) (2019-11-24)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-import-meta-loader
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [0.4.0](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.3.4...@open-wc/webpack-import-meta-loader@0.4.0) (2019-11-19)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* update to use auto compatibility of es-dev-server ([f6d085e](https://github.com/open-wc/open-wc/commit/f6d085eda5a05391d1a464b9e49222c78194b0d9))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.3.4](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.3.3...@open-wc/webpack-import-meta-loader@0.3.4) (2019-10-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* align used mocha version ([#901](https://github.com/open-wc/open-wc/issues/901)) ([3606381](https://github.com/open-wc/open-wc/commit/3606381))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.3.3](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.3.2...@open-wc/webpack-import-meta-loader@0.3.3) (2019-10-23)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* add package keywords ([#859](https://github.com/open-wc/open-wc/issues/859)) ([cd78405](https://github.com/open-wc/open-wc/commit/cd78405))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.3.2](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.3.1...@open-wc/webpack-import-meta-loader@0.3.2) (2019-10-16)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **webpack-import-meta-loader:** transform template literals to js ([#872](https://github.com/open-wc/open-wc/issues/872)) ([2efd727](https://github.com/open-wc/open-wc/commit/2efd727))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.3.1](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.3.0...@open-wc/webpack-import-meta-loader@0.3.1) (2019-08-05)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* cleanup package.json scripts ([be6bdb5](https://github.com/open-wc/open-wc/commit/be6bdb5))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [0.3.0](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.2.5...@open-wc/webpack-import-meta-loader@0.3.0) (2019-07-14)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **webpack-import-meta-loader:** support for __webpack_public_path__ ([#570](https://github.com/open-wc/open-wc/issues/570)) ([f072185](https://github.com/open-wc/open-wc/commit/f072185))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.5](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.2.4...@open-wc/webpack-import-meta-loader@0.2.5) (2019-07-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* use file extensions for imports to support import maps ([c711b13](https://github.com/open-wc/open-wc/commit/c711b13))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.4](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.2.3...@open-wc/webpack-import-meta-loader@0.2.4) (2019-06-05)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-import-meta-loader
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.3](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.2.2...@open-wc/webpack-import-meta-loader@0.2.3) (2019-06-04)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-import-meta-loader
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.2](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.2.1...@open-wc/webpack-import-meta-loader@0.2.2) (2019-06-03)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **webpack-import-meta-loader:** rewrite all backslashes ([#477](https://github.com/open-wc/open-wc/issues/477)) ([ade8a65](https://github.com/open-wc/open-wc/commit/ade8a65))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.2.1](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.2.0...@open-wc/webpack-import-meta-loader@0.2.1) (2019-05-03)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **webpack-import-meta-loader:** fix filepaths ([4480d2d](https://github.com/open-wc/open-wc/commit/4480d2d))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [0.2.0](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.1.3...@open-wc/webpack-import-meta-loader@0.2.0) (2019-03-23)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add types + linting & improve intellisense ([b6d260c](https://github.com/open-wc/open-wc/commit/b6d260c))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.3](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.1.2...@open-wc/webpack-import-meta-loader@0.1.3) (2019-03-08)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-import-meta-loader
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.2](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-import-meta-loader@0.1.1...@open-wc/webpack-import-meta-loader@0.1.2) (2019-02-16)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* update package repository fields with monorepo details ([cb1acb7](https://github.com/open-wc/open-wc/commit/cb1acb7))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [0.1.1](https://github.com/open-wc/open-wc/tree/master/packages/webpack-import-meta-loader/compare/@open-wc/webpack-import-meta-loader@0.1.0...@open-wc/webpack-import-meta-loader@0.1.1) (2019-02-02)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* unify npm readme header for all open-wc packages ([1bac939](https://github.com/open-wc/open-wc/tree/master/packages/webpack-import-meta-loader/commit/1bac939))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# 0.1.0 (2019-01-26)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add webpack-import-meta-loader ([38dad6a](https://github.com/open-wc/open-wc/tree/master/packages/webpack-import-meta-loader/commit/38dad6a))
|
||||
@@ -1,21 +0,0 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2018 open-wc
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@@ -1,33 +1 @@
|
||||
# Webpack Helpers
|
||||
|
||||
Webpack loader for supporting `import.meta` in webpack.
|
||||
|
||||
[//]: # 'AUTO INSERT HEADER PREPUBLISH'
|
||||
|
||||
## Note
|
||||
|
||||
This is NOT an optimal solution e.g. it may slow down your build a little.
|
||||
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
|
||||
|
||||
- [https://github.com/webpack/webpack/issues/6719](https://github.com/webpack/webpack/issues/6719)
|
||||
- [https://github.com/Polymer/tools/issues/518](https://github.com/Polymer/tools/issues/518)
|
||||
|
||||
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-import-meta-loader`
|
||||
- Add this to your webpack config
|
||||
|
||||
```js
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: require.resolve('@open-wc/webpack-import-meta-loader'),
|
||||
},
|
||||
],
|
||||
},
|
||||
```
|
||||
I move into the legacy repository [webpack-import-meta-loader](https://github.com/open-wc/legacy/tree/master/packages/webpack-import-meta-loader) we now recommend [babel-plugin-bundled-import-meta](https://www.npmjs.com/package/babel-plugin-bundled-import-meta).
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
{
|
||||
"name": "@open-wc/webpack-import-meta-loader",
|
||||
"version": "0.4.7",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"description": "Webpack configuration following open-wc recommendations",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/open-wc/open-wc.git",
|
||||
"directory": "packages/webpack-import-meta-loader"
|
||||
},
|
||||
"author": "open-wc",
|
||||
"homepage": "https://github.com/open-wc/open-wc/tree/master/packages/webpack-import-meta-loader",
|
||||
"main": "webpack-import-meta-loader.js",
|
||||
"scripts": {
|
||||
"prepublishOnly": "../../scripts/insert-header.js",
|
||||
"test": "npm run test:node",
|
||||
"test:node": "mocha --require @babel/register"
|
||||
},
|
||||
"files": [
|
||||
"*.js",
|
||||
"src"
|
||||
],
|
||||
"keywords": [
|
||||
"webpack",
|
||||
"meta-loader",
|
||||
"import-meta"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@babel/register": "^7.9.0",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"memory-fs": "^0.4.1",
|
||||
"webpack": "^4.28.0"
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
const path = require('path');
|
||||
|
||||
module.exports = function toBrowserPath(filePath, _path = path) {
|
||||
return filePath.replace(new RegExp(_path.sep === '\\' ? '\\\\' : _path.sep, 'g'), '/');
|
||||
};
|
||||
@@ -1,2 +0,0 @@
|
||||
export const foo = new URL('./', import.meta.url);
|
||||
export const bar = new URL('./', import.meta.url);
|
||||
@@ -1 +0,0 @@
|
||||
export const foo = () => import.meta;
|
||||
@@ -1 +0,0 @@
|
||||
export const bar = new URL('./', import.meta.url);
|
||||
@@ -1,3 +0,0 @@
|
||||
import './caseBsub/caseBsub.js';
|
||||
|
||||
export const foo = new URL('./', import.meta.url);
|
||||
@@ -1,28 +0,0 @@
|
||||
import path from 'path';
|
||||
import webpack from 'webpack';
|
||||
import MemoryFs from 'memory-fs';
|
||||
|
||||
export default (fixture, rules = [{}]) => {
|
||||
const compiler = webpack({
|
||||
mode: 'development',
|
||||
context: __dirname,
|
||||
entry: `./${fixture}`,
|
||||
output: {
|
||||
path: path.resolve(__dirname),
|
||||
filename: 'bundle.js',
|
||||
},
|
||||
module: {
|
||||
rules,
|
||||
},
|
||||
});
|
||||
|
||||
compiler.outputFileSystem = new MemoryFs();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
compiler.run((err, stats) => {
|
||||
if (err || stats.hasErrors()) reject(err);
|
||||
|
||||
resolve(stats);
|
||||
});
|
||||
});
|
||||
};
|
||||
@@ -1,14 +0,0 @@
|
||||
const { expect } = require('chai');
|
||||
const toBrowserPath = require('../src/to-browser-path');
|
||||
|
||||
describe('toBrowserPath', () => {
|
||||
it('replaces all path windows separators', () => {
|
||||
// @ts-ignore
|
||||
expect(toBrowserPath('foo\\bar\\buz', { sep: '\\' })).to.equal('foo/bar/buz');
|
||||
});
|
||||
|
||||
it('preserves all unix path separators', () => {
|
||||
// @ts-ignore
|
||||
expect(toBrowserPath('foo/bar/buz', { sep: '/' })).to.equal('foo/bar/buz');
|
||||
});
|
||||
});
|
||||
@@ -1,50 +0,0 @@
|
||||
/* eslint-disable no-template-curly-in-string */
|
||||
|
||||
import chai from 'chai';
|
||||
import path from 'path';
|
||||
import { EOL as newLine } from 'os';
|
||||
import compiler from './compiler.js';
|
||||
|
||||
const { expect } = chai;
|
||||
|
||||
const rules = [
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: path.resolve(__dirname, '../webpack-import-meta-loader.js'),
|
||||
},
|
||||
];
|
||||
function getOnlyDynamicSource(source) {
|
||||
return source.split('\n').splice(18).join(newLine);
|
||||
}
|
||||
|
||||
describe('import-meta-url-loader', () => {
|
||||
it('Replaces all instances of import.meta', async () => {
|
||||
const stats = await compiler('caseA/index.js', rules);
|
||||
const caseA = getOnlyDynamicSource(stats.toJson().modules[0].source);
|
||||
|
||||
expect(caseA).to.equal(
|
||||
`${"export const foo = new URL('./', ({ url: getAbsoluteUrl('caseA/index.js') }).url);"}${newLine}export const bar = new URL('./', ({ url: getAbsoluteUrl('caseA/index.js') }).url);${newLine}`,
|
||||
);
|
||||
|
||||
const statsReturn = await compiler('caseA/return.js', rules);
|
||||
const caseAreturn = getOnlyDynamicSource(statsReturn.toJson().modules[0].source);
|
||||
// eslint-disable-next-line quotes
|
||||
expect(caseAreturn).to.equal(
|
||||
`export const foo = () => ({ url: getAbsoluteUrl('caseA/return.js') });${newLine}`,
|
||||
);
|
||||
});
|
||||
|
||||
it('Replaces nested instances of import.meta', async () => {
|
||||
const stats = await compiler('caseB/index.js', rules);
|
||||
const caseB = getOnlyDynamicSource(stats.toJson().modules[1].source);
|
||||
const caseBsub = getOnlyDynamicSource(stats.toJson().modules[0].source);
|
||||
|
||||
expect(caseB).to.equal(
|
||||
`${"import './caseBsub/caseBsub.js';"}${newLine}${newLine}export const foo = new URL('./', ({ url: getAbsoluteUrl('caseB/index.js') }).url);${newLine}`,
|
||||
);
|
||||
|
||||
expect(caseBsub).to.equal(
|
||||
`export const bar = new URL('./', ({ url: getAbsoluteUrl('caseB/caseBsub/caseBsub.js') }).url);${newLine}`,
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -1,57 +0,0 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
const toBrowserPath = require('./src/to-browser-path');
|
||||
const regex = /import\.meta/g;
|
||||
|
||||
/**
|
||||
* Webpack loader to rewrite `import.meta` in modules with url data to the source code file location.
|
||||
*
|
||||
* @example
|
||||
* return import.meta;
|
||||
* // becomes: return ({ url: `${window.location.protocol}//${window.location.host}/relative/path/to/file.js` });
|
||||
*
|
||||
* return import.meta.url;
|
||||
* // becomes: return ({ url: `${window.location.protocol}//${window.location.host}/relative/path/to/file.js` }).url;
|
||||
*/
|
||||
module.exports = function (source) {
|
||||
const path = require('path');
|
||||
|
||||
const relativePath = this.context.substring(
|
||||
this.context.indexOf(this.rootContext) + this.rootContext.length + 1,
|
||||
this.resource.lastIndexOf(path.sep) + 1,
|
||||
);
|
||||
|
||||
const browserPath = toBrowserPath(relativePath);
|
||||
|
||||
const fileName = this.resource.substring(this.resource.lastIndexOf(path.sep) + 1);
|
||||
|
||||
let found = false;
|
||||
let rewrittenSource = source.replace(regex, () => {
|
||||
found = true;
|
||||
return `({ url: getAbsoluteUrl('${browserPath}/${fileName}') })`;
|
||||
});
|
||||
|
||||
if (found) {
|
||||
return `
|
||||
function getAbsoluteUrl(relativeUrl) {
|
||||
const publicPath = __webpack_public_path__;
|
||||
|
||||
let url = '';
|
||||
|
||||
if (!publicPath || publicPath.indexOf('://') < 0) {
|
||||
url += window.location.protocol + '//' + window.location.host;
|
||||
}
|
||||
|
||||
if (publicPath) {
|
||||
url += publicPath;
|
||||
} else {
|
||||
url += '/';
|
||||
}
|
||||
|
||||
return url + relativeUrl;
|
||||
}
|
||||
${rewrittenSource}`;
|
||||
} else {
|
||||
return source;
|
||||
}
|
||||
};
|
||||
@@ -1,544 +0,0 @@
|
||||
# Change Log
|
||||
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [1.7.14](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.7.13...@open-wc/webpack-index-html-plugin@1.7.14) (2020-10-11)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.7.13](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.7.12...@open-wc/webpack-index-html-plugin@1.7.13) (2020-10-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* change parameters order due to typescript error ([846d5c4](https://github.com/open-wc/open-wc/commit/846d5c4deb4e128568de055382f9563c59f02e76))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.7.12](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.7.11...@open-wc/webpack-index-html-plugin@1.7.12) (2020-09-25)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.7.11](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.7.10...@open-wc/webpack-index-html-plugin@1.7.11) (2020-08-27)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.7.10](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.7.9...@open-wc/webpack-index-html-plugin@1.7.10) (2020-05-13)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.7.9](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.7.8...@open-wc/webpack-index-html-plugin@1.7.9) (2020-05-05)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.7.8](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.7.7...@open-wc/webpack-index-html-plugin@1.7.8) (2020-04-20)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.7.7](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.7.6...@open-wc/webpack-index-html-plugin@1.7.7) (2020-04-16)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.7.6](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.7.5...@open-wc/webpack-index-html-plugin@1.7.6) (2020-04-12)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.7.5](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.7.4...@open-wc/webpack-index-html-plugin@1.7.5) (2020-04-05)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.7.4](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.7.3...@open-wc/webpack-index-html-plugin@1.7.4) (2020-03-24)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.7.3](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.7.2...@open-wc/webpack-index-html-plugin@1.7.3) (2020-03-11)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.7.2](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.7.1...@open-wc/webpack-index-html-plugin@1.7.2) (2020-03-10)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.7.1](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.7.0...@open-wc/webpack-index-html-plugin@1.7.1) (2020-03-06)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [1.7.0](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.6.5...@open-wc/webpack-index-html-plugin@1.7.0) (2020-02-29)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **rollup-plugin-html:** first release ([9acb29a](https://github.com/open-wc/open-wc/commit/9acb29ac84b0ef7e2b06c57043c9d2c76d5a29c0))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.6.5](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.6.4...@open-wc/webpack-index-html-plugin@1.6.5) (2020-02-23)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.6.4](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.6.3...@open-wc/webpack-index-html-plugin@1.6.4) (2020-02-10)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.6.3](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.6.2...@open-wc/webpack-index-html-plugin@1.6.3) (2020-02-09)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.6.2](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.6.1...@open-wc/webpack-index-html-plugin@1.6.2) (2020-02-06)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.6.1](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.6.0...@open-wc/webpack-index-html-plugin@1.6.1) (2020-02-02)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [1.6.0](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.5.10...@open-wc/webpack-index-html-plugin@1.6.0) (2020-01-31)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* skip brooken published versions ([25d21de](https://github.com/open-wc/open-wc/commit/25d21def522f22f98fc8c71b4c055617089c0e23))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **polyfills-loader:** add polyfills loader ([249fee8](https://github.com/open-wc/open-wc/commit/249fee8a64982021eb2e1ad1937f3c08a4abc3c5))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.5.10](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.5.9...@open-wc/webpack-index-html-plugin@1.5.10) (2019-12-09)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.5.9](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.5.8...@open-wc/webpack-index-html-plugin@1.5.9) (2019-12-05)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.5.8](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.5.7...@open-wc/webpack-index-html-plugin@1.5.8) (2019-12-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **building-utils:** update snapshots ([5fc118a](https://github.com/open-wc/open-wc/commit/5fc118af6c19412cc7f782e73e6006234aa892d0))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.5.7](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.5.6...@open-wc/webpack-index-html-plugin@1.5.7) (2019-11-24)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.5.6](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.5.5...@open-wc/webpack-index-html-plugin@1.5.6) (2019-11-20)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.5.5](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.5.4...@open-wc/webpack-index-html-plugin@1.5.5) (2019-11-19)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.5.4](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.5.3...@open-wc/webpack-index-html-plugin@1.5.4) (2019-11-03)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* align versions within the monorepo ([fa2ad9f](https://github.com/open-wc/open-wc/commit/fa2ad9f))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.5.3](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.5.2...@open-wc/webpack-index-html-plugin@1.5.3) (2019-10-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* align used mocha version ([#901](https://github.com/open-wc/open-wc/issues/901)) ([3606381](https://github.com/open-wc/open-wc/commit/3606381))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.5.2](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.5.1...@open-wc/webpack-index-html-plugin@1.5.2) (2019-10-23)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* add package keywords ([#859](https://github.com/open-wc/open-wc/issues/859)) ([cd78405](https://github.com/open-wc/open-wc/commit/cd78405))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.5.1](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.5.0...@open-wc/webpack-index-html-plugin@1.5.1) (2019-10-22)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [1.5.0](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.4.2...@open-wc/webpack-index-html-plugin@1.5.0) (2019-09-27)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **building-utils:** add option to polyfillsConfig to disable hashes in filenames ([#808](https://github.com/open-wc/open-wc/issues/808)) ([6763b83](https://github.com/open-wc/open-wc/commit/6763b83))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.4.2](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.4.1...@open-wc/webpack-index-html-plugin@1.4.2) (2019-09-22)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.4.1](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.4.0...@open-wc/webpack-index-html-plugin@1.4.1) (2019-09-11)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [1.4.0](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.3.3...@open-wc/webpack-index-html-plugin@1.4.0) (2019-08-27)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **webpack-index-html-plugin:** enable the use of webpack watchers ([e4833eb](https://github.com/open-wc/open-wc/commit/e4833eb))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.3.3](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.3.2...@open-wc/webpack-index-html-plugin@1.3.3) (2019-08-21)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.3.2](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.3.1...@open-wc/webpack-index-html-plugin@1.3.2) (2019-08-20)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.3.1](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.3.0...@open-wc/webpack-index-html-plugin@1.3.1) (2019-08-18)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **webpack-index-html-plugin:** create entry without extension ([0996821](https://github.com/open-wc/open-wc/commit/0996821))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [1.3.0](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.2.15...@open-wc/webpack-index-html-plugin@1.3.0) (2019-08-14)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **eslint-config:** update dependencies ([52909e8](https://github.com/open-wc/open-wc/commit/52909e8))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.2.15](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.2.14...@open-wc/webpack-index-html-plugin@1.2.15) (2019-08-13)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.2.14](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.2.13...@open-wc/webpack-index-html-plugin@1.2.14) (2019-08-13)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.2.13](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.2.12...@open-wc/webpack-index-html-plugin@1.2.13) (2019-08-05)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.2.12](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.2.11...@open-wc/webpack-index-html-plugin@1.2.12) (2019-08-04)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.2.11](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.2.10...@open-wc/webpack-index-html-plugin@1.2.11) (2019-07-26)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.2.10](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.2.9...@open-wc/webpack-index-html-plugin@1.2.10) (2019-07-24)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.2.9](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.2.8...@open-wc/webpack-index-html-plugin@1.2.9) (2019-07-22)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.2.8](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.2.7...@open-wc/webpack-index-html-plugin@1.2.8) (2019-07-19)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.2.7](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.2.6...@open-wc/webpack-index-html-plugin@1.2.7) (2019-07-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* adopt to new testing-karma setup ([bdcc717](https://github.com/open-wc/open-wc/commit/bdcc717))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.2.6](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.2.5...@open-wc/webpack-index-html-plugin@1.2.6) (2019-07-13)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.2.5](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.2.4...@open-wc/webpack-index-html-plugin@1.2.5) (2019-07-08)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.2.4](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.2.3...@open-wc/webpack-index-html-plugin@1.2.4) (2019-07-08)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.2.3](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.2.2...@open-wc/webpack-index-html-plugin@1.2.3) (2019-07-08)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.2.2](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.2.1...@open-wc/webpack-index-html-plugin@1.2.2) (2019-07-02)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **es-dev-server:** don't call next on non-2xx response ([f3e865a](https://github.com/open-wc/open-wc/commit/f3e865a))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.2.1](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.2.0...@open-wc/webpack-index-html-plugin@1.2.1) (2019-07-02)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **webpack-index-html-plugin:** improve error message ([f4c93db](https://github.com/open-wc/open-wc/commit/f4c93db))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [1.2.0](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.1.2...@open-wc/webpack-index-html-plugin@1.2.0) (2019-07-02)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add es dev server ([2c6a0a8](https://github.com/open-wc/open-wc/commit/2c6a0a8))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.1.2](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.1.1...@open-wc/webpack-index-html-plugin@1.1.2) (2019-06-30)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **webpack-index-html-plugin:** multi build now works on windows ([#522](https://github.com/open-wc/open-wc/issues/522)) ([b24723a](https://github.com/open-wc/open-wc/commit/b24723a))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.1.1](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.1.0...@open-wc/webpack-index-html-plugin@1.1.1) (2019-06-23)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [1.1.0](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.0.1...@open-wc/webpack-index-html-plugin@1.1.0) (2019-06-23)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **building-rollup:** add rollup-index-html-plugin ([#510](https://github.com/open-wc/open-wc/issues/510)) ([2ac2d19](https://github.com/open-wc/open-wc/commit/2ac2d19))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.0.1](https://github.com/open-wc/open-wc/compare/@open-wc/webpack-index-html-plugin@1.0.0...@open-wc/webpack-index-html-plugin@1.0.1) (2019-06-18)
|
||||
|
||||
**Note:** Version bump only for package @open-wc/webpack-index-html-plugin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# 1.0.0 (2019-06-14)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* utils and webpack plugin for an index.html entrypoint ([#474](https://github.com/open-wc/open-wc/issues/474)) ([c382cc7](https://github.com/open-wc/open-wc/commit/c382cc7))
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* Replaced webpack html plugin with index html plugin
|
||||
@@ -1,263 +1 @@
|
||||
# Webpack Index HTML Plugin
|
||||
|
||||
Webpack plugin to make webpack understand your index.html.
|
||||
|
||||
[//]: # 'AUTO INSERT HEADER PREPUBLISH'
|
||||
|
||||
1. Takes in a standard index.html:
|
||||
|
||||
```html
|
||||
<html lang="en-GB">
|
||||
<head>
|
||||
<title>My app</title>
|
||||
<style>
|
||||
my-app {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>
|
||||
<span>
|
||||
Hello world!
|
||||
</span>
|
||||
</h1>
|
||||
<my-app></my-app>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var message = 'hello inline script';
|
||||
console.log(message);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module" src="./app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
2. Extracts any `<script type="module" src="...">` and feeds them to webpack as entry point(s)
|
||||
|
||||
3. Outputs the same index.html with updated file hashes and all inline HTML, CSS and JS minified:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
```html
|
||||
<html lang="en-GB"><head><title>My app</title><style>my-app{display:block}</style></head><body><h1><span>Hello world!</span></h1><my-app></my-app><script>console.log("hello inline script");</script><script src="app.202933f045cc9f6cdf51.js"></script></body></html>
|
||||
```
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
4. Optionally adds a loader script for conditionally loading polyfills and/or a separate build for older browsers.
|
||||
|
||||
Note that only module scripts with a `src` attribute are used as entrypoints, regular scripts and inline modules are minified but not parsed by webpack.
|
||||
|
||||
## Usage
|
||||
|
||||
To use this plugin, add it to your webpack configuration and set your index.html as entrypoint:
|
||||
|
||||
```js
|
||||
const path = require('path');
|
||||
const WebpackIndexHTMLPlugin = require('@open-wc/webpack-index-html-plugin');
|
||||
|
||||
module.exports = {
|
||||
entry: path.resolve(__dirname, './index.html'),
|
||||
|
||||
output: {
|
||||
filename: '[name].[chunkhash].js',
|
||||
chunkFilename: '[name].[chunkhash].js',
|
||||
},
|
||||
|
||||
plugins: [new WebpackIndexHTMLPlugin()],
|
||||
};
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
### Polyfills
|
||||
|
||||
> Note when using `@open-wc/building-webpack` polyfills are already configured for you.
|
||||
|
||||
Depending on which browser you need to support you may need to polyfill certain browser features. To keep your bundles small, we don't serve any polyfills by default. You can enable polyfills in the configuration.
|
||||
|
||||
When enabling polyfills a small loader script is injected to your index.html. Polyfills are loaded based on feature detection. This causes a small delay in loading your app. We mediate this by adding a preload link during the build.
|
||||
|
||||
To enable polyfills:
|
||||
|
||||
```js
|
||||
new WebpackIndexHTMLPlugin({
|
||||
polyfills: {
|
||||
hashPolyfills: true,
|
||||
coreJs: true,
|
||||
regeneratorRuntime: true,
|
||||
webcomponents: true,
|
||||
fetch: true,
|
||||
intersectionObserver: true,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
`core-js` polyfills many language features such as `Promise`, `Symbol` and `String.prototype.includes`. `regeneratorRuntime` is necessary when you compile `async await` code which is transpiled to javascript ES5. These two polyfills are mainly for supporting legacy browsers. They are only loaded on browsers which don't support modules, such as IE11.
|
||||
|
||||
The rest of the polyfills target specific browser features, see their documentation for more info:
|
||||
|
||||
- [core-js](https://github.com/zloirock/core-js)
|
||||
- [regenerator-runtime](https://github.com/facebook/regenerator/tree/master/packages/regenerator-runtime)
|
||||
- [webcomponents](https://github.com/webcomponents/webcomponentsjs)
|
||||
- [fetch](https://github.com/github/fetch)
|
||||
- [intersection-observer](https://github.com/w3c/IntersectionObserver)
|
||||
|
||||
If you need a polyfill which is not on this list, consider creating an issue so that we can add it. You can also specify custom polyfills:
|
||||
|
||||
```js
|
||||
new WebpackIndexHTMLPlugin({
|
||||
polyfills: {
|
||||
coreJs: true,
|
||||
customPolyfills: [
|
||||
{
|
||||
// the name of your polyfill
|
||||
name: 'my-feature',
|
||||
// expression which is run in the browser to determine if the polyfill should be loaded
|
||||
test: "'myFeature' in window",
|
||||
// path to your polyfill
|
||||
path: require.resolve('my-feature-polyfill/dist/bundled.js'),
|
||||
// path to the sourcemaps of your polyfill. optional
|
||||
sourcemapPath: require.resolve('my-feature-polyfill/dist/bundled.js.map'),
|
||||
},
|
||||
],
|
||||
},
|
||||
})
|
||||
|
||||
You can disable the content hash in the distributed polyfill filenames by setting `polyfillsHash` to `false`.
|
||||
```
|
||||
|
||||
### Multi (legacy and modern) build
|
||||
|
||||
> Note when using `@open-wc/building-webpack/modern-and-legacy-config` the multi build is already configured for you
|
||||
|
||||
If you need to support non-modern browsers, such IE11 or older versions of chrome, safari and firefox, it's better to create multiple builds of your app.
|
||||
|
||||
You can make one build for modern browsers using modern syntax and features, and one build for legacy browsers compiled to javascript ES5 and with more polyfills loaded. This way you don't penalize all your users for your lowest browser target.
|
||||
|
||||
To create multiple webpack builds, export an array of webpack configs instead of a single config. Set the `multiBuild` option in both instances of the plugin and set `legacy` option in the legacy build:
|
||||
|
||||
```javascript
|
||||
const path = require('path');
|
||||
const WebpackIndexHTMLPlugin = require('@open-wc/webpack-index-html-plugin');
|
||||
|
||||
module.exports = [
|
||||
{
|
||||
entry: path.resolve(__dirname, './index.html'),
|
||||
plugins: [
|
||||
new WebpackIndexHTMLPlugin({
|
||||
multiBuild: true,
|
||||
polyfills: {
|
||||
coreJs: true,
|
||||
regeneratorRuntime: true,
|
||||
webcomponents: true,
|
||||
},
|
||||
}),
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
entry: path.resolve(__dirname, './index.html'),
|
||||
module: {
|
||||
rules: [
|
||||
// Note: You will probably also want to configure babel for the legacy build.
|
||||
// this is not a complete example, you will need to add more configuration for babel
|
||||
{ test: /\.js/, use: { loader: 'babel-loader' } },
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new WebpackIndexHTMLPlugin({
|
||||
multiBuild: true,
|
||||
legacy: true,
|
||||
}),
|
||||
],
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
For the legacy build you do not need to configure any polyfills, as these are already injected by the modern build.
|
||||
|
||||
You will probably need to use babel as well to transpile your code to ES5. Remember to change the browser targets for the modern and legacy build accordingly. For example latest 2 of the major browsers for modern and IE11 for the legac build.
|
||||
|
||||
### Minification
|
||||
|
||||
We use [html-minifier](https://github.com/kangax/html-minifier) for minifcation with a default configuration. You can adjust this configuration by passing a minify object:
|
||||
|
||||
```js
|
||||
new WebpackIndexHTMLPlugin({
|
||||
minify: {
|
||||
// minify options
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
The options object is passed as is to `html-minifier`. See the documentation of [html-minifier](https://github.com/kangax/html-minifier) for all possible minification options.
|
||||
|
||||
It is also possible to turn off minification completely by passing minify:
|
||||
|
||||
```js
|
||||
new WebpackIndexHTMLPlugin({
|
||||
minify: false,
|
||||
});
|
||||
```
|
||||
|
||||
### Non index.html entrypoints
|
||||
|
||||
You can use this plugin without an index.html plugin if you still want to make use of the polyfilling features. You can do this by adding a custom template function:
|
||||
|
||||
```js
|
||||
const path = require('path');
|
||||
const WebpackIndexHTMLPlugin = require('@open-wc/webpack-index-html-plugin');
|
||||
|
||||
module.exports = {
|
||||
entry: path.resolve(__dirname, './my-app.js'),
|
||||
|
||||
output: {
|
||||
filename: '[name].[chunkhash].js',
|
||||
chunkFilename: '[name].[chunkhash].js',
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new WebpackIndexHTMLPlugin({
|
||||
template: ({ assets, entries, legacyEntries, variation }) => `
|
||||
<html>
|
||||
<head></head>
|
||||
<body></body>
|
||||
</html>
|
||||
`,
|
||||
}),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### CSP
|
||||
|
||||
When loading polyfills we inject a small script in your index.html. If you need CSP you can separate the script in a separate file:
|
||||
|
||||
```js
|
||||
const path = require('path');
|
||||
const WebpackIndexHTMLPlugin = require('@open-wc/webpack-index-html-plugin');
|
||||
|
||||
module.exports = {
|
||||
entry: path.resolve(__dirname, './my-app.js'),
|
||||
|
||||
output: {
|
||||
filename: '[name].[chunkhash].js',
|
||||
chunkFilename: '[name].[chunkhash].js',
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new WebpackIndexHTMLPlugin({
|
||||
polyfills: {
|
||||
webcomponents: true,
|
||||
},
|
||||
loader: 'external',
|
||||
}),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
The template function receives the project's `assets` and `entries`. If applicable it also receives the `legacyEntries` and `variation`.
|
||||
I move into the legacy repository [webpack-index-html-plugin](https://github.com/open-wc/legacy/tree/master/packages/webpack-index-html-plugin) we now recommend rollup over webpack
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
{
|
||||
"name": "@open-wc/webpack-index-html-plugin",
|
||||
"version": "1.7.14",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"description": "Plugin for generating a index html with webpack",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/open-wc/open-wc.git",
|
||||
"directory": "packages/webpack-index-html-plugin"
|
||||
},
|
||||
"author": "open-wc",
|
||||
"homepage": "https://github.com/open-wc/open-wc/tree/master/packages/webpack-index-html-plugin",
|
||||
"main": "webpack-index-html-plugin.js",
|
||||
"scripts": {},
|
||||
"files": [
|
||||
"*.js",
|
||||
"src"
|
||||
],
|
||||
"keywords": [
|
||||
"webpack",
|
||||
"plugin",
|
||||
"config",
|
||||
"polyfills"
|
||||
],
|
||||
"peerDependencies": {
|
||||
"webpack": "^4.28.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@open-wc/building-utils": "^2.18.3",
|
||||
"deepmerge": "^4.2.2",
|
||||
"parse5": "^5.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@webcomponents/webcomponentsjs": "^2.4.0",
|
||||
"intersection-observer": "^0.7.0",
|
||||
"memory-fs": "^0.4.1",
|
||||
"mkdirp": "^0.5.1",
|
||||
"webpack": "^4.28.0",
|
||||
"whatwg-fetch": "^3.0.0"
|
||||
}
|
||||
}
|
||||
@@ -1,117 +0,0 @@
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
|
||||
const MultiEntryPlugin = require('webpack/lib/MultiEntryPlugin');
|
||||
const { extractResources } = require('@open-wc/building-utils/index-html');
|
||||
|
||||
function getFilenameWithoutExtension(filePath) {
|
||||
const filename = path.basename(filePath);
|
||||
return filename.substring(0, filename.length - path.extname(filename).length);
|
||||
}
|
||||
|
||||
function createEntrypoints(compiler, context, entry, config, createError) {
|
||||
let index;
|
||||
let nonAppEntryPoints;
|
||||
|
||||
// entry is an array when running webpack dev server, so we handle it. However we should not encourage/communicate that people can
|
||||
// use an array
|
||||
if (Array.isArray(entry)) {
|
||||
const indices = entry.filter(e => e.endsWith('index.html'));
|
||||
nonAppEntryPoints = entry.filter(e => !e.endsWith('index.html'));
|
||||
|
||||
if (indices.length === 0) {
|
||||
throw createError(
|
||||
'Entry must be a string pointing to a index.html file. For multiple entry points add module scripts to your index.html.',
|
||||
);
|
||||
} else if (indices.length > 1) {
|
||||
throw createError('There should be only one index.html entrypoint.');
|
||||
} else {
|
||||
[index] = indices;
|
||||
}
|
||||
} else if (typeof entry !== 'string') {
|
||||
throw createError(
|
||||
'Entry must be a string pointing to a index.html file. For multiple entry points add module scripts to your index.html.',
|
||||
);
|
||||
} else {
|
||||
if (!entry.endsWith('index.html')) {
|
||||
throw createError(
|
||||
'Entry must be a single index.html file. If you wish to use a javascript file as entrypoint you need to set a HTML template function.',
|
||||
);
|
||||
}
|
||||
index = entry;
|
||||
}
|
||||
|
||||
if (!fs.existsSync(index)) {
|
||||
throw createError(`Could not find entry file: ${index}`);
|
||||
}
|
||||
|
||||
const indexFolder = path.dirname(index);
|
||||
const indexHTMLString = fs.readFileSync(index, 'utf-8');
|
||||
const resources = extractResources(indexHTMLString);
|
||||
|
||||
if (resources.jsModules.length === 0) {
|
||||
throw createError(
|
||||
'Could not find any js modules in entry point. Add a <script type="module" src="..."> to your index.html',
|
||||
);
|
||||
}
|
||||
|
||||
const entries = resources.jsModules.map(jsModule => ({
|
||||
jsModule: path.resolve(indexFolder, jsModule),
|
||||
entryName: getFilenameWithoutExtension(jsModule),
|
||||
}));
|
||||
|
||||
if (new Set(entries.map(e => e.entryName)).size !== entries.length) {
|
||||
throw createError('Module filenames imported the index.html should be unique.');
|
||||
}
|
||||
|
||||
function buildEntryPoints(appEntrypoint, entryName) {
|
||||
if (nonAppEntryPoints) {
|
||||
new MultiEntryPlugin(context, [appEntrypoint, ...nonAppEntryPoints], entryName).apply(
|
||||
compiler,
|
||||
);
|
||||
// app entry points should only be added once to the first entrypoint
|
||||
nonAppEntryPoints = null;
|
||||
} else {
|
||||
new SingleEntryPlugin(context, appEntrypoint, entryName).apply(compiler);
|
||||
}
|
||||
}
|
||||
|
||||
let entryNamesForVariations = null;
|
||||
if (!config.multiIndex) {
|
||||
entries.forEach(({ jsModule, entryName }) => {
|
||||
buildEntryPoints(jsModule, entryName);
|
||||
});
|
||||
} else {
|
||||
entryNamesForVariations = new Map();
|
||||
|
||||
// we need to create multiple index files, for each entry create a new entry for each variation.
|
||||
entries.forEach(({ jsModule, entryName }) => {
|
||||
config.multiIndex.variations.forEach(variation => {
|
||||
const entrySuffix = variation.sharedEntry || variation.name;
|
||||
const variationEntryName = `${entryName}-${entrySuffix}`;
|
||||
|
||||
let entryNamesForVariation = entryNamesForVariations.get(variation.name);
|
||||
if (!entryNamesForVariation) {
|
||||
entryNamesForVariation = [];
|
||||
entryNamesForVariations.set(variation.name, entryNamesForVariation);
|
||||
}
|
||||
entryNamesForVariation.push(variationEntryName);
|
||||
|
||||
// if this index shares an entry point, no need to create it's own entry point
|
||||
if (variation.sharedEntry) {
|
||||
return;
|
||||
}
|
||||
|
||||
buildEntryPoints(jsModule, variationEntryName);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
baseIndex: resources.indexHTML,
|
||||
entries: entries.map(e => e.entryName),
|
||||
entryNamesForVariations,
|
||||
};
|
||||
}
|
||||
|
||||
module.exports.createEntrypoints = createEntrypoints;
|
||||
@@ -1,147 +0,0 @@
|
||||
/* eslint-disable class-methods-use-this, no-param-reassign */
|
||||
const { serialize, parse } = require('parse5');
|
||||
const { createIndexHTML, minifyIndexHTML } = require('@open-wc/building-utils/index-html');
|
||||
|
||||
const VARIATION_FALLBACK = Symbol('fallback');
|
||||
/** @param {import('parse5').Document} ast */
|
||||
function cloneAST(ast) {
|
||||
return parse(serialize(ast));
|
||||
}
|
||||
|
||||
/** @typedef {import('../webpack-index-html-plugin').BuildResult} BuildResult */
|
||||
|
||||
/**
|
||||
* Emits index.html and the associated polyfills.
|
||||
*
|
||||
* @param {object} compilation
|
||||
* @param {import('../webpack-index-html-plugin').WebpackIndexHTMLPluginConfig} config
|
||||
* @param {import('parse5').Document} [baseIndex]
|
||||
* @param {BuildResult} buildResult
|
||||
* @param {BuildResult} [legacyBuildResult]
|
||||
*/
|
||||
function emitIndexHTML(compilation, config, buildResult, legacyBuildResult, baseIndex) {
|
||||
/**
|
||||
* @param {string} [filename]
|
||||
* @param {string[]} [entries]
|
||||
* @param {string[]} [legacyEntries]
|
||||
* @param {string | Symbol} [variation]
|
||||
*/
|
||||
const generateIndex = (filename, entries, legacyEntries, variation) => {
|
||||
/** @type {import('parse5').Document} */
|
||||
let localBaseIndex;
|
||||
|
||||
/** If there is a user defined template, use that as the base to inject the output into. */
|
||||
if (config.template) {
|
||||
if (typeof config.template !== 'function') {
|
||||
throw new Error('config.template should be a function.');
|
||||
}
|
||||
|
||||
const templateString = config.template({
|
||||
assets: compilation.assets,
|
||||
entries,
|
||||
legacyEntries,
|
||||
variation: variation && variation.toString(),
|
||||
});
|
||||
localBaseIndex = parse(templateString);
|
||||
} else {
|
||||
/**
|
||||
* If there is no user defined template the entrypoint was an index.html, and we use that as the base
|
||||
* for our output. We need to clone it to avoid mutating the baseIndex variable.
|
||||
*/
|
||||
localBaseIndex = cloneAST(baseIndex);
|
||||
}
|
||||
|
||||
/** @type {string} */
|
||||
let finalIndexHTML;
|
||||
|
||||
/** Inject generated output into index.html */
|
||||
if (config.inject) {
|
||||
const generateResult = createIndexHTML(localBaseIndex, {
|
||||
...config,
|
||||
entries: { type: 'script', files: entries },
|
||||
legacyEntries: legacyEntries ? { type: 'script', files: legacyEntries } : undefined,
|
||||
});
|
||||
|
||||
finalIndexHTML = generateResult.indexHTML;
|
||||
if (config.multiIndex && config.multiIndex.transformIndex) {
|
||||
finalIndexHTML = config.multiIndex.transformIndex(
|
||||
finalIndexHTML,
|
||||
variation.toString(),
|
||||
variation === VARIATION_FALLBACK,
|
||||
);
|
||||
}
|
||||
|
||||
generateResult.files.forEach(file => {
|
||||
compilation.assets[file.path] = {
|
||||
source: () => file.content,
|
||||
size: () => file.content.length,
|
||||
};
|
||||
});
|
||||
} else {
|
||||
/** If injection is disabled the user takes control, probably with it's own template. */
|
||||
const serialized = serialize(localBaseIndex);
|
||||
finalIndexHTML = minifyIndexHTML(serialized);
|
||||
}
|
||||
|
||||
compilation.assets[filename] = {
|
||||
source: () => finalIndexHTML,
|
||||
size: () => finalIndexHTML.length,
|
||||
};
|
||||
};
|
||||
|
||||
if (!buildResult.entryNamesForVariations) {
|
||||
// regular build without variations
|
||||
generateIndex(
|
||||
'index.html',
|
||||
buildResult.entries,
|
||||
legacyBuildResult && legacyBuildResult.entries,
|
||||
);
|
||||
} else {
|
||||
// build with variations with a separate index per variation
|
||||
buildResult.entryNamesForVariations.forEach((entryNamesForVariation, variation) => {
|
||||
const entriesForVariation = buildResult.entries.filter(e1 =>
|
||||
entryNamesForVariation.some(e2 => e1.startsWith(e2)),
|
||||
);
|
||||
|
||||
const legacyEntriesForVariation =
|
||||
legacyBuildResult &&
|
||||
legacyBuildResult.entries.filter(e1 =>
|
||||
legacyBuildResult.entryNamesForVariations.get(variation).some(e2 => e1.includes(e2)),
|
||||
);
|
||||
|
||||
generateIndex(
|
||||
`index-${variation}.html`,
|
||||
entriesForVariation,
|
||||
legacyEntriesForVariation,
|
||||
variation,
|
||||
);
|
||||
});
|
||||
|
||||
// if necessary, also create a fallback build which generates a fallback index.html
|
||||
if (config.multiIndex.fallback) {
|
||||
const entryNamesForVariation = buildResult.entryNamesForVariations.get(
|
||||
config.multiIndex.fallback,
|
||||
);
|
||||
const entriesForVariation = buildResult.entries.filter(e1 =>
|
||||
entryNamesForVariation.some(e2 => e1.startsWith(e2)),
|
||||
);
|
||||
|
||||
const legacyEntriesForVariation =
|
||||
legacyBuildResult &&
|
||||
legacyBuildResult.entries.filter(e1 =>
|
||||
legacyBuildResult.entryNamesForVariations
|
||||
.get(config.multiIndex.fallback)
|
||||
.some(e2 => e1.includes(e2)),
|
||||
);
|
||||
|
||||
generateIndex(
|
||||
'index.html',
|
||||
entriesForVariation,
|
||||
legacyEntriesForVariation,
|
||||
VARIATION_FALLBACK,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports.emitIndexHTML = emitIndexHTML;
|
||||
@@ -1,57 +0,0 @@
|
||||
const PLUGIN_NAME = 'WebpackIndexHTMLPlugin';
|
||||
|
||||
/**
|
||||
* @template T
|
||||
* @typedef {object} DeferredPromise
|
||||
* @property {Promise<T>} promise
|
||||
* @property {(arg: T) => void} resolve
|
||||
* @property {(error: any) => void} reject
|
||||
*/
|
||||
|
||||
/** @param {string} msg */
|
||||
function createError(msg) {
|
||||
return new Error(`[${PLUGIN_NAME}]: ${msg}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* @template T
|
||||
* @returns {DeferredPromise<T>}
|
||||
*/
|
||||
function createDeferredPromise() {
|
||||
/** @type {Partial<DeferredPromise<T>>} */
|
||||
const deferredPromise = {};
|
||||
deferredPromise.promise = new Promise((resolve, reject) => {
|
||||
deferredPromise.resolve = resolve;
|
||||
deferredPromise.reject = reject;
|
||||
});
|
||||
|
||||
// @ts-ignore
|
||||
return deferredPromise;
|
||||
}
|
||||
|
||||
/**
|
||||
* @template T
|
||||
* @param {Promise<T>} promise
|
||||
* @param {number} timeout
|
||||
* @param {string} msg
|
||||
* @returns {Promise<T>}
|
||||
*/
|
||||
function waitOrTimeout(promise, timeout, msg) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const timeoutId = setTimeout(() => {
|
||||
reject(new Error(msg));
|
||||
}, timeout);
|
||||
|
||||
promise.then(result => {
|
||||
resolve(result);
|
||||
clearTimeout(timeoutId);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
PLUGIN_NAME,
|
||||
createError,
|
||||
createDeferredPromise,
|
||||
waitOrTimeout,
|
||||
};
|
||||
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
const myFunction = function myFunction() {
|
||||
if (true) {
|
||||
console.log('polyfill a: this code should be minified');
|
||||
}
|
||||
return 5;
|
||||
};
|
||||
|
||||
console.log(myFunction());
|
||||
@@ -1,10 +0,0 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
const myFunction = function myFunction() {
|
||||
if (true) {
|
||||
console.log('polyfill b: this code should not be minified');
|
||||
}
|
||||
return 5;
|
||||
};
|
||||
|
||||
console.log(myFunction());
|
||||
@@ -1 +0,0 @@
|
||||
// polyfill-b map
|
||||
@@ -1,4 +0,0 @@
|
||||
// @ts-nocheck
|
||||
/* eslint-disable */
|
||||
console.log('my app');
|
||||
import('./lazy.js');
|
||||
@@ -1,30 +0,0 @@
|
||||
<html lang="en-GB">
|
||||
|
||||
<head>
|
||||
<title>My app</title>
|
||||
<style>
|
||||
my-app {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>
|
||||
<span>
|
||||
Hello world!
|
||||
</span>
|
||||
</h1>
|
||||
<my-app></my-app>
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
(function () {
|
||||
const message = 'hello inline script';
|
||||
console.log(message);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module" src="./app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1 +0,0 @@
|
||||
console.log('my lazy');
|
||||
@@ -1,39 +0,0 @@
|
||||
const path = require('path');
|
||||
const WebpackIndexHTMLPlugin = require('../../../webpack-index-html-plugin');
|
||||
|
||||
module.exports = [
|
||||
{
|
||||
entry: path.resolve(__dirname, './index.html'),
|
||||
|
||||
output: {
|
||||
filename: 'legacy/[name].[contenthash].js',
|
||||
chunkFilename: 'legacy/[name].[contenthash].js',
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new WebpackIndexHTMLPlugin({
|
||||
multiBuild: true,
|
||||
legacy: true,
|
||||
}),
|
||||
],
|
||||
},
|
||||
{
|
||||
entry: path.resolve(__dirname, './index.html'),
|
||||
|
||||
output: {
|
||||
filename: '[name].[contenthash].js',
|
||||
chunkFilename: '[name].[contenthash].js',
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new WebpackIndexHTMLPlugin({
|
||||
multiBuild: true,
|
||||
loader: 'external',
|
||||
polyfills: {
|
||||
coreJs: true,
|
||||
webcomponents: true,
|
||||
},
|
||||
}),
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -1,4 +0,0 @@
|
||||
// @ts-nocheck
|
||||
/* eslint-disable */
|
||||
console.log('my app');
|
||||
import('./lazy.js');
|
||||
@@ -1,30 +0,0 @@
|
||||
<html lang="en-GB">
|
||||
|
||||
<head>
|
||||
<title>My app</title>
|
||||
<style>
|
||||
my-app {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>
|
||||
<span>
|
||||
Hello world!
|
||||
</span>
|
||||
</h1>
|
||||
<my-app></my-app>
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
(function () {
|
||||
const message = 'hello inline script';
|
||||
console.log(message);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module" src="./app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1 +0,0 @@
|
||||
console.log('my lazy');
|
||||
@@ -1,59 +0,0 @@
|
||||
const path = require('path');
|
||||
const WebpackIndexHTMLPlugin = require('../../../webpack-index-html-plugin');
|
||||
|
||||
module.exports = [
|
||||
{
|
||||
entry: path.resolve(__dirname, './index.html'),
|
||||
|
||||
output: {
|
||||
filename: 'legacy/[name].[contenthash].js',
|
||||
chunkFilename: 'legacy/[name].[contenthash].js',
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new WebpackIndexHTMLPlugin({
|
||||
multiBuild: true,
|
||||
legacy: true,
|
||||
multiIndex: {
|
||||
variations: [
|
||||
{ name: 'en-GB' },
|
||||
{ name: 'nl-NL' },
|
||||
{ name: 'fr-FR' },
|
||||
{ name: 'demo', sharedEntry: 'en-GB' },
|
||||
],
|
||||
},
|
||||
}),
|
||||
],
|
||||
},
|
||||
{
|
||||
entry: path.resolve(__dirname, './index.html'),
|
||||
|
||||
output: {
|
||||
filename: '[name].[contenthash].js',
|
||||
chunkFilename: '[name].[contenthash].js',
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new WebpackIndexHTMLPlugin({
|
||||
multiBuild: true,
|
||||
polyfills: {
|
||||
coreJs: true,
|
||||
webcomponents: true,
|
||||
},
|
||||
multiIndex: {
|
||||
fallback: 'en-GB',
|
||||
variations: [
|
||||
{ name: 'en-GB' },
|
||||
{ name: 'nl-NL' },
|
||||
{ name: 'fr-FR' },
|
||||
{ name: 'demo', sharedEntry: 'en-GB' },
|
||||
],
|
||||
transformIndex: (index, variation, fallback) => {
|
||||
const lang = fallback || variation === 'demo' ? 'en-GB' : variation;
|
||||
return index.replace('<html lang="en-GB">', `<html lang="${lang}">`);
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -1,4 +0,0 @@
|
||||
// @ts-nocheck
|
||||
/* eslint-disable */
|
||||
console.log('my app');
|
||||
import('./lazy.js');
|
||||
@@ -1,30 +0,0 @@
|
||||
<html lang="en-GB">
|
||||
|
||||
<head>
|
||||
<title>My app</title>
|
||||
<style>
|
||||
my-app {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>
|
||||
<span>
|
||||
Hello world!
|
||||
</span>
|
||||
</h1>
|
||||
<my-app></my-app>
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
(function () {
|
||||
const message = 'hello inline script';
|
||||
console.log(message);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module" src="./app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1 +0,0 @@
|
||||
console.log('my lazy');
|
||||
@@ -1,38 +0,0 @@
|
||||
const path = require('path');
|
||||
const WebpackIndexHTMLPlugin = require('../../../webpack-index-html-plugin');
|
||||
|
||||
module.exports = [
|
||||
{
|
||||
entry: path.resolve(__dirname, './index.html'),
|
||||
|
||||
output: {
|
||||
filename: 'legacy/[name].[contenthash].js',
|
||||
chunkFilename: 'legacy/[name].[contenthash].js',
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new WebpackIndexHTMLPlugin({
|
||||
multiBuild: true,
|
||||
legacy: true,
|
||||
}),
|
||||
],
|
||||
},
|
||||
{
|
||||
entry: path.resolve(__dirname, './index.html'),
|
||||
|
||||
output: {
|
||||
filename: '[name].[contenthash].js',
|
||||
chunkFilename: '[name].[contenthash].js',
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new WebpackIndexHTMLPlugin({
|
||||
multiBuild: true,
|
||||
polyfills: {
|
||||
coreJs: true,
|
||||
webcomponents: true,
|
||||
},
|
||||
}),
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -1,4 +0,0 @@
|
||||
// @ts-nocheck
|
||||
/* eslint-disable */
|
||||
console.log('my app');
|
||||
import('./lazy.js.js');
|
||||
@@ -1,28 +0,0 @@
|
||||
<html lang="en-GB">
|
||||
|
||||
<head>
|
||||
<title>My app</title>
|
||||
<style>
|
||||
my-app {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>
|
||||
<span>
|
||||
Hello world!
|
||||
</span>
|
||||
</h1>
|
||||
<my-app></my-app>
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
(function () {
|
||||
const message = 'hello inline script';
|
||||
console.log(message);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1 +0,0 @@
|
||||
console.log('my lazy');
|
||||
@@ -1,18 +0,0 @@
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const WebpackIndexHTMLPlugin = require('../../../webpack-index-html-plugin');
|
||||
|
||||
module.exports = {
|
||||
entry: path.resolve(__dirname, './app.js'),
|
||||
|
||||
output: {
|
||||
filename: '[name].[contenthash].js',
|
||||
chunkFilename: '[name].[contenthash].js',
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new WebpackIndexHTMLPlugin({
|
||||
template: () => fs.readFileSync(path.resolve(__dirname, './app.js'), 'utf-8'),
|
||||
}),
|
||||
],
|
||||
};
|
||||
@@ -1,4 +0,0 @@
|
||||
// @ts-nocheck
|
||||
/* eslint-disable */
|
||||
console.log('my app');
|
||||
import('./lazy.js');
|
||||
@@ -1,30 +0,0 @@
|
||||
<html lang="en-GB">
|
||||
|
||||
<head>
|
||||
<title>My app</title>
|
||||
<style>
|
||||
my-app {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>
|
||||
<span>
|
||||
Hello world!
|
||||
</span>
|
||||
</h1>
|
||||
<my-app></my-app>
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
(function () {
|
||||
const message = 'hello inline script';
|
||||
console.log(message);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module" src="./app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1 +0,0 @@
|
||||
console.log('my lazy');
|
||||
@@ -1,29 +0,0 @@
|
||||
const path = require('path');
|
||||
|
||||
const WebpackIndexHTMLPlugin = require('../../../webpack-index-html-plugin');
|
||||
|
||||
module.exports = {
|
||||
entry: path.resolve(__dirname, './app.js'),
|
||||
|
||||
output: {
|
||||
filename: '[name].[contenthash].js',
|
||||
chunkFilename: '[name].[contenthash].js',
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new WebpackIndexHTMLPlugin({
|
||||
inject: false,
|
||||
template: ({ entries }) => `
|
||||
<html>
|
||||
<head>
|
||||
${entries.map(entry => `<link rel="preload" href="${entry}" as="script">`).join('')}
|
||||
</head>
|
||||
<p>Template factory</p>
|
||||
<body>
|
||||
${entries.map(entry => `<script type="module" src="${entry}"></script>`).join('')}
|
||||
</body>
|
||||
</html>
|
||||
`,
|
||||
}),
|
||||
],
|
||||
};
|
||||
@@ -1,4 +0,0 @@
|
||||
// @ts-nocheck
|
||||
/* eslint-disable */
|
||||
console.log('my app');
|
||||
import('./lazy.js');
|
||||
@@ -1,23 +0,0 @@
|
||||
<html lang="en-GB">
|
||||
|
||||
<head>
|
||||
<title>My app</title>
|
||||
<style>
|
||||
my-app {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>
|
||||
<span>
|
||||
Hello world!
|
||||
</span>
|
||||
</h1>
|
||||
<my-app></my-app>
|
||||
<script type="module" src="./app.js"></script>
|
||||
<script type="module" src="./second-entry-point.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1 +0,0 @@
|
||||
console.log('my lazy');
|
||||
@@ -1 +0,0 @@
|
||||
console.log('second entry point');
|
||||
@@ -1,13 +0,0 @@
|
||||
const path = require('path');
|
||||
const WebpackIndexHTMLPlugin = require('../../../webpack-index-html-plugin');
|
||||
|
||||
module.exports = {
|
||||
entry: path.resolve(__dirname, './index.html'),
|
||||
|
||||
output: {
|
||||
filename: '[name].[contenthash].js',
|
||||
chunkFilename: '[name].[contenthash].js',
|
||||
},
|
||||
|
||||
plugins: [new WebpackIndexHTMLPlugin()],
|
||||
};
|
||||
@@ -1,4 +0,0 @@
|
||||
// @ts-nocheck
|
||||
/* eslint-disable */
|
||||
console.log('my app');
|
||||
import('./lazy.js');
|
||||
@@ -1,22 +0,0 @@
|
||||
<html lang="en-GB">
|
||||
|
||||
<head>
|
||||
<title>My app</title>
|
||||
<style>
|
||||
my-app {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>
|
||||
<span>
|
||||
Hello world!
|
||||
</span>
|
||||
</h1>
|
||||
<my-app></my-app>
|
||||
<script type="module" src="./app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1 +0,0 @@
|
||||
console.log('my lazy');
|
||||
@@ -1,29 +0,0 @@
|
||||
const path = require('path');
|
||||
const WebpackIndexHTMLPlugin = require('../../../webpack-index-html-plugin');
|
||||
|
||||
module.exports = {
|
||||
entry: path.resolve(__dirname, './index.html'),
|
||||
|
||||
output: {
|
||||
filename: '[name].[contenthash].js',
|
||||
chunkFilename: '[name].[contenthash].js',
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new WebpackIndexHTMLPlugin({
|
||||
multiIndex: {
|
||||
fallback: 'en-GB',
|
||||
variations: [
|
||||
{ name: 'en-GB' },
|
||||
{ name: 'nl-NL' },
|
||||
{ name: 'fr-FR' },
|
||||
{ name: 'demo', sharedEntry: 'en-GB' },
|
||||
],
|
||||
transformIndex: (index, variation, fallback) => {
|
||||
const lang = fallback || variation === 'demo' ? 'en-GB' : variation;
|
||||
return index.replace('<html lang="en-GB">', `<html lang="${lang}">`);
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
};
|
||||
@@ -1,4 +0,0 @@
|
||||
// @ts-nocheck
|
||||
/* eslint-disable */
|
||||
console.log('my app');
|
||||
import('./lazy.js');
|
||||
@@ -1,30 +0,0 @@
|
||||
<html lang="en-GB">
|
||||
|
||||
<head>
|
||||
<title>My app</title>
|
||||
<style>
|
||||
my-app {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>
|
||||
<span>
|
||||
Hello world!
|
||||
</span>
|
||||
</h1>
|
||||
<my-app></my-app>
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
(function () {
|
||||
const message = 'hello inline script';
|
||||
console.log(message);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module" src="./app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1 +0,0 @@
|
||||
console.log('my lazy');
|
||||
@@ -1,22 +0,0 @@
|
||||
const path = require('path');
|
||||
const WebpackIndexHTMLPlugin = require('../../../webpack-index-html-plugin');
|
||||
|
||||
module.exports = {
|
||||
entry: path.resolve(__dirname, './index.html'),
|
||||
|
||||
output: {
|
||||
filename: '[name].[contenthash].js',
|
||||
chunkFilename: '[name].[contenthash].js',
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new WebpackIndexHTMLPlugin({
|
||||
polyfills: {
|
||||
hashPolyfills: false,
|
||||
coreJs: true,
|
||||
regeneratorRuntime: true,
|
||||
webcomponents: true,
|
||||
},
|
||||
}),
|
||||
],
|
||||
};
|
||||
@@ -1,4 +0,0 @@
|
||||
// @ts-nocheck
|
||||
/* eslint-disable */
|
||||
console.log('my app');
|
||||
import('./lazy.js');
|
||||
@@ -1,30 +0,0 @@
|
||||
<html lang="en-GB">
|
||||
|
||||
<head>
|
||||
<title>My app</title>
|
||||
<style>
|
||||
my-app {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>
|
||||
<span>
|
||||
Hello world!
|
||||
</span>
|
||||
</h1>
|
||||
<my-app></my-app>
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
(function () {
|
||||
const message = 'hello inline script';
|
||||
console.log(message);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module" src="./app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1 +0,0 @@
|
||||
console.log('my lazy');
|
||||
@@ -1,21 +0,0 @@
|
||||
const path = require('path');
|
||||
const WebpackIndexHTMLPlugin = require('../../../webpack-index-html-plugin');
|
||||
|
||||
module.exports = {
|
||||
entry: path.resolve(__dirname, './index.html'),
|
||||
|
||||
output: {
|
||||
filename: '[name].[contenthash].js',
|
||||
chunkFilename: '[name].[contenthash].js',
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new WebpackIndexHTMLPlugin({
|
||||
polyfills: {
|
||||
coreJs: true,
|
||||
regeneratorRuntime: true,
|
||||
webcomponents: true,
|
||||
},
|
||||
}),
|
||||
],
|
||||
};
|
||||
@@ -1,4 +0,0 @@
|
||||
// @ts-nocheck
|
||||
/* eslint-disable */
|
||||
console.log('my app');
|
||||
import('./lazy.js');
|
||||
@@ -1,30 +0,0 @@
|
||||
<html lang="en-GB">
|
||||
|
||||
<head>
|
||||
<title>My app</title>
|
||||
<style>
|
||||
my-app {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>
|
||||
<span>
|
||||
Hello world!
|
||||
</span>
|
||||
</h1>
|
||||
<my-app></my-app>
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
(function () {
|
||||
const message = 'hello inline script';
|
||||
console.log(message);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="module" src="./app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1 +0,0 @@
|
||||
console.log('my lazy');
|
||||
@@ -1,13 +0,0 @@
|
||||
const path = require('path');
|
||||
const WebpackIndexHTMLPlugin = require('../../../webpack-index-html-plugin');
|
||||
|
||||
module.exports = {
|
||||
entry: path.resolve(__dirname, './index.html'),
|
||||
|
||||
output: {
|
||||
filename: '[name].[contenthash].js',
|
||||
chunkFilename: '[name].[contenthash].js',
|
||||
},
|
||||
|
||||
plugins: [new WebpackIndexHTMLPlugin()],
|
||||
};
|
||||
@@ -1,94 +0,0 @@
|
||||
/* eslint-disable import/no-dynamic-require, global-require */
|
||||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const os = require('os');
|
||||
const { testSnapshots } = require('@open-wc/building-utils/testing-helpers/snapshots');
|
||||
const { PLUGIN_NAME } = require('../src/utils');
|
||||
|
||||
const fixturesDir = path.join(__dirname, 'fixtures');
|
||||
|
||||
function touchAppFile(name) {
|
||||
const appPath = path.join(fixturesDir, name, 'app.js');
|
||||
const now = new Date();
|
||||
fs.utimesSync(appPath, now, now);
|
||||
}
|
||||
|
||||
function compileAsync(config, addWatcher, name) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const compiler = webpack({
|
||||
...config,
|
||||
output: {
|
||||
...config.output,
|
||||
path: os.tmpdir(),
|
||||
},
|
||||
});
|
||||
let finished = !addWatcher;
|
||||
let watching;
|
||||
const cb = (err, stats) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
watching && watching.close();
|
||||
} else if (finished) {
|
||||
resolve(stats);
|
||||
watching && watching.close();
|
||||
}
|
||||
};
|
||||
|
||||
if (addWatcher) {
|
||||
watching = compiler.watch({}, cb);
|
||||
compiler.hooks.afterCompile.tap(PLUGIN_NAME, () => {
|
||||
if (!finished) {
|
||||
finished = true;
|
||||
touchAppFile(name);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
} else {
|
||||
compiler.run(cb);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function testSnapshot(name, configFilePath, addWatcher = false) {
|
||||
const snapshotDir = path.join(__dirname, 'snapshots', name);
|
||||
const requireResult = require(configFilePath);
|
||||
const configs = Array.isArray(requireResult) ? requireResult : [requireResult];
|
||||
|
||||
/** @type {{ [key: string]: string }} */
|
||||
const outputFiles = {};
|
||||
|
||||
// multi build
|
||||
// note: this should be sequential, not parallel
|
||||
/* eslint-disable no-restricted-syntax, no-await-in-loop */
|
||||
for (const config of configs) {
|
||||
const stats = await compileAsync(config, addWatcher, name);
|
||||
|
||||
Object.entries(stats.compilation.assets).forEach(([filePath, file]) => {
|
||||
outputFiles[filePath] = file.source();
|
||||
});
|
||||
}
|
||||
|
||||
testSnapshots(snapshotDir, outputFiles);
|
||||
}
|
||||
|
||||
const testCases = fs.readdirSync(fixturesDir);
|
||||
|
||||
describe('webpack-index-html-plugin integration test', () => {
|
||||
testCases.forEach(name => {
|
||||
const configFilePath = path.join(fixturesDir, name, 'webpack.config.js');
|
||||
if (!fs.existsSync(configFilePath)) {
|
||||
return;
|
||||
}
|
||||
|
||||
it(`test case ${name}`, async function it() {
|
||||
this.timeout(1000 * 10);
|
||||
await testSnapshot(name, configFilePath);
|
||||
});
|
||||
|
||||
it(`test case ${name} with watcher`, async function it() {
|
||||
this.timeout(1000 * 10);
|
||||
await testSnapshot(name, configFilePath, true);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1 +0,0 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[1],[,function(o,n){console.log("my lazy")}]]);
|
||||
@@ -1 +0,0 @@
|
||||
!function(e){function t(t){for(var r,o,u=t[0],i=t[1],a=0,l=[];a<u.length;a++)o=u[a],Object.prototype.hasOwnProperty.call(n,o)&&n[o]&&l.push(n[o][0]),n[o]=0;for(r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r]);for(c&&c(t);l.length;)l.shift()()}var r={},n={0:0};function o(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.e=function(e){var t=[],r=n[e];if(0!==r)if(r)t.push(r[2]);else{var u=new Promise((function(t,o){r=n[e]=[t,o]}));t.push(r[2]=u);var i,a=document.createElement("script");a.charset="utf-8",a.timeout=120,o.nc&&a.setAttribute("nonce",o.nc),a.src=function(e){return o.p+""+({}[e]||e)+"."+{1:"6460eaa1be9cec799f97"}[e]+".js"}(e);var c=new Error;i=function(t){a.onerror=a.onload=null,clearTimeout(l);var r=n[e];if(0!==r){if(r){var o=t&&("load"===t.type?"missing":t.type),u=t&&t.target&&t.target.src;c.message="Loading chunk "+e+" failed.\n("+o+": "+u+")",c.name="ChunkLoadError",c.type=o,c.request=u,r[1](c)}n[e]=void 0}};var l=setTimeout((function(){i({type:"timeout",target:a})}),12e4);a.onerror=a.onload=i,document.head.appendChild(a)}return Promise.all(t)},o.m=e,o.c=r,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)o.d(r,n,function(t){return e[t]}.bind(null,n));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o.oe=function(e){throw console.error(e),e};var u=window.webpackJsonp=window.webpackJsonp||[],i=u.push.bind(u);u.push=t,u=u.slice();for(var a=0;a<u.length;a++)t(u[a]);var c=i;o(o.s=0)}([function(e,t,r){console.log("my app"),r.e(1).then(r.t.bind(null,1,7))}]);
|
||||
@@ -1 +0,0 @@
|
||||
<html lang="en-GB"><head><title>My app</title><style>my-app{display:block}</style><link rel="preload" href="app.3a93364ee90208c7ab18.js" as="script"></head><body><h1><span>Hello world!</span></h1><my-app></my-app><script src="polyfills/core-js.577a5602a7262d6256830802d4aaab43.js" nomodule=""></script><script>console.log("hello inline script");</script><script src="loader.24b9b1c6fdcdd67961a536e52578b3fd.js"></script></body></html>
|
||||
@@ -1 +0,0 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[1],[,function(o,n){console.log("my lazy")}]]);
|
||||
@@ -1 +0,0 @@
|
||||
!function(e){function t(t){for(var r,o,u=t[0],i=t[1],a=0,l=[];a<u.length;a++)o=u[a],Object.prototype.hasOwnProperty.call(n,o)&&n[o]&&l.push(n[o][0]),n[o]=0;for(r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r]);for(c&&c(t);l.length;)l.shift()()}var r={},n={0:0};function o(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.e=function(e){var t=[],r=n[e];if(0!==r)if(r)t.push(r[2]);else{var u=new Promise((function(t,o){r=n[e]=[t,o]}));t.push(r[2]=u);var i,a=document.createElement("script");a.charset="utf-8",a.timeout=120,o.nc&&a.setAttribute("nonce",o.nc),a.src=function(e){return o.p+"legacy/"+({}[e]||e)+"."+{1:"6460eaa1be9cec799f97"}[e]+".js"}(e);var c=new Error;i=function(t){a.onerror=a.onload=null,clearTimeout(l);var r=n[e];if(0!==r){if(r){var o=t&&("load"===t.type?"missing":t.type),u=t&&t.target&&t.target.src;c.message="Loading chunk "+e+" failed.\n("+o+": "+u+")",c.name="ChunkLoadError",c.type=o,c.request=u,r[1](c)}n[e]=void 0}};var l=setTimeout((function(){i({type:"timeout",target:a})}),12e4);a.onerror=a.onload=i,document.head.appendChild(a)}return Promise.all(t)},o.m=e,o.c=r,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)o.d(r,n,function(t){return e[t]}.bind(null,n));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o.oe=function(e){throw console.error(e),e};var u=window.webpackJsonp=window.webpackJsonp||[],i=u.push.bind(u);u.push=t,u=u.slice();for(var a=0;a<u.length;a++)t(u[a]);var c=i;o(o.s=0)}([function(e,t,r){console.log("my app"),r.e(1).then(r.t.bind(null,1,7))}]);
|
||||
@@ -1 +0,0 @@
|
||||
!function(){function e(e,o){return new Promise((function(t,n){document.head.appendChild(Object.assign(document.createElement("script"),{src:e,onload:t,onerror:n},o?{type:"module"}:void 0))}))}var o=[];function t(){"noModule"in HTMLScriptElement.prototype?e("./app.3a93364ee90208c7ab18.js"):e("./legacy/app.dc126e48488aa981a60a.js")}(!("attachShadow"in Element.prototype)||!("getRootNode"in Element.prototype)||window.ShadyDOM&&window.ShadyDOM.force)&&o.push(e("polyfills/webcomponents.d67d6757b8cd44bc35b021ee0b71d197.js",!1)),!("noModule"in HTMLScriptElement.prototype)&&"getRootNode"in Element.prototype&&o.push(e("polyfills/custom-elements-es5-adapter.84b300ee818dce8b351c7cc7c100bcf7.js",!1)),o.length?Promise.all(o).then(t):t()}();
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user