# dynamic-dual-import-webpack-plugin

> Makes dual import (js chunk + css chunk) for dynamic import and require.ensure. It works in cooperation with extract-css-chunks-webpack-plugin.

Latest version **1.1.0** (published 2018-04-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install dynamic-dual-import-webpack-plugin
pnpm add dynamic-dual-import-webpack-plugin
yarn add dynamic-dual-import-webpack-plugin
bun add dynamic-dual-import-webpack-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2018-04-16 |
| First published | 2018-03-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Constantine Oupirum |
| Maintainers | tradingview |

## Links

- npm: https://www.npmjs.com/package/dynamic-dual-import-webpack-plugin
- npm.io page: https://npm.io/package/dynamic-dual-import-webpack-plugin

## Dependencies (1)

- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0

## Recent versions

- 1.1.0 (latest) — 2018-04-16
- 1.0.3 — 2018-04-05
- 1.0.2 — 2018-04-02
- 1.0.1 — 2018-03-31
- 1.0.0 — 2018-03-30

## README

# dynamic-dual-import-webpack-plugin
Makes dual import (js chunk + css chunk) for dynamic import and require.ensure.

It works in cooperation with <a href="https://www.npmjs.com/package/extract-css-chunks-webpack-plugin">extract-css-chunks-webpack-plugin</a>.

# How to setup
**1.** Add plugins to webpack.config.js:

```js
var ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');
var DynamicDualImportPlugin = require('dynamic-dual-import-webpack-plugin');
// ...
module.exports = {
  plugins: [
    // ...
    new ExtractCssChunksPlugin({
      filename: '[name].css'
    }),
    new DynamicDualImportPlugin({
      cssChunksHashFilename: 'css_chunks_hash.js'
    }),
    // ...
  ]
};
```

**2.** Add loaders to webpack.plugin.js:

```js
module.exports = {
  module: {
    rules: [
      // ...
      {
        test: /\.ts$/,  // for example
        use: [
          DynamicDualImportPlugin.loader({
            processRequireEnsure: true  // if you need process both `import()` and `require.ensure`
                // by default only `import()`
          }),
          {
            loader: 'ts-loader'
          },
          // ...
        ]
      },
      // ...
```

**3.** Include chunks hash into your html:

```html
<head>
  ...
  <script type="text/javascript" src="/my_public_path/css_chunks_hash.js"></script>
</head>
```

**4.** After this `import()` and `require.ensure` will automatically import both .js and .css chunks.

**But** format have to be:

```js
import(
  /* webpackChunkName: "my-chunk-name" */  // chunk name is mandatory!
  './my-module'
).then((m) => {
  m.doSomething();
});

require.ensure([], (require) => {
  const m = require('./my-module');
  m.doSomething();
}, 'my-chunk-name');  // chunk name is mandatory!
```

---
_Source: https://npm.io/package/dynamic-dual-import-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._