{"id":13451955,"url":"https://github.com/sebastian-software/babel-plugin-smart-webpack-import","last_synced_at":"2025-06-11T17:32:34.121Z","repository":{"id":32428769,"uuid":"133355857","full_name":"sebastian-software/babel-plugin-smart-webpack-import","owner":"sebastian-software","description":"Making webpack imports smarter by injecting additional features dynamically. Goal: Make import() more user-friendly.","archived":false,"fork":false,"pushed_at":"2023-01-06T01:34:00.000Z","size":3435,"stargazers_count":46,"open_issues_count":17,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-11T18:53:41.167Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sebastian-software.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-14T12:15:27.000Z","updated_at":"2023-04-28T10:43:12.000Z","dependencies_parsed_at":"2023-01-14T21:10:38.757Z","dependency_job_id":null,"html_url":"https://github.com/sebastian-software/babel-plugin-smart-webpack-import","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastian-software%2Fbabel-plugin-smart-webpack-import","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastian-software%2Fbabel-plugin-smart-webpack-import/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastian-software%2Fbabel-plugin-smart-webpack-import/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastian-software%2Fbabel-plugin-smart-webpack-import/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sebastian-software","download_url":"https://codeload.github.com/sebastian-software/babel-plugin-smart-webpack-import/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226789339,"owners_count":17682269,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T07:01:08.257Z","updated_at":"2024-11-27T17:14:25.213Z","avatar_url":"https://github.com/sebastian-software.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Smart Webpack Import\u003cbr/\u003e[![Sponsored by][sponsor-img]][sponsor] [![Version][npm-version-img]][npm] [![Downloads][npm-downloads-img]][npm] [![Build Status Unix][travis-img]][travis] [![Build Status Windows][appveyor-img]][appveyor]\n\n[sponsor-img]: https://img.shields.io/badge/Sponsored%20by-Sebastian%20Software-692446.svg\n[sponsor]: https://www.sebastian-software.de\n[npm]: https://www.npmjs.com/package/babel-plugin-smart-webpack-import\n[npm-downloads-img]: https://img.shields.io/npm/dm/babel-plugin-smart-webpack-import.svg\n[npm-version-img]: https://img.shields.io/npm/v/babel-plugin-smart-webpack-import.svg\n[travis-img]: https://img.shields.io/travis/sebastian-software/babel-plugin-smart-webpack-import/master.svg?branch=master\u0026label=unix%20build\n[appveyor-img]: https://img.shields.io/appveyor/ci/swernerx/babel-plugin-smart-webpack-import/master.svg?label=windows%20build\n[travis]: https://travis-ci.org/sebastian-software/babel-plugin-smart-webpack-import\n[appveyor]: https://ci.appveyor.com/project/swernerx/babel-plugin-smart-webpack-import/branch/master\n\nSmart Webpack Import has the goal to improve the developer experience when working with so-called dynamic `import()` statements.\n\n## Features\n\n- Automatic chunk names for all imports.\n- Respects existing chunk names and keeps them.\n- Keeps other magic comments from Webpack in-tact while adding our ones.\n- Uses hashes on requester to prevent collisions for identically named imports.\n- Works together with [Loadable Components](https://www.smooth-code.com/open-source/loadable-components/) and (other code-splitting SSR solutions).\n\n## Installation\n\n```\nnpm i -D babel-plugin-smart-webpack-import\n```\n\n## Usage\n\n```js\n\"plugins\": [\n  \"babel-plugin-smart-webpack-import\"\n]\n```\n\nUse it together with your favorite code splitting library:\n\n```js\n\"plugins\": [\n  \"babel-plugin-smart-webpack-import\",\n  \"@loadable/babel-plugin\"\n]\n```\n\nHash suffixes can be disabled by passing `hashes: false` option:\n\n```js\n\"plugins\": [\n  [\"babel-plugin-smart-webpack-import\", { hashes: false } ]\n]\n```\n\nIn this case it is developer's responsibility to ensure that there are no\ncollisions between identically named imports.\n\n## Example\n\n### Basic\n\n```js\nimport('./HelloView')\n\n      ↓ ↓ ↓ ↓ ↓ ↓\n\nimport(\n/*webpackChunkName:'HelloView-zy9ks'*/\n'./HelloView');\n```\n\n### Keeps Prefetch\n\n```js\nimport(/* webpackPrefetch: true */ './HelloView')\n\n      ↓ ↓ ↓ ↓ ↓ ↓\n\nimport(\n/*webpackPrefetch:true,webpackChunkName:'HelloView-zy9ks'*/\n'./HelloView');\n```\n\n### Shortens Paths\n\n```js\nimport('./views/admin/SettingsView')\n\n      ↓ ↓ ↓ ↓ ↓ ↓\n\nimport(\n/*webpackChunkName:'SettingsView-ijYnC'*/\n'./views/admin/SettingsView');\n```\n\n### Supports query-based imports\n\n```js\nimport(`./views/${name}`)\n\n      ↓ ↓ ↓ ↓ ↓ ↓\n\nimport(\n/*webpackChunkName:'views-[request]-njvjH'*/\n`./views/${name}`);\n```\n\n### Shortens query-based imports\n\n```js\nimport(`./app/views/${name}`)\n\n      ↓ ↓ ↓ ↓ ↓ ↓\n\nimport(\n/*webpackChunkName:'views-[request]-xkLem'*/\n`./views/${name}`);\n```\n\n### Same as Basic, but with `{ hashes: false }` option\n\n```js\nimport('./HelloView')\n\n      ↓ ↓ ↓ ↓ ↓ ↓\n\nimport(\n/*webpackChunkName:'HelloView'*/\n'./HelloView');\n```\n\n## Comments\n\nTo make this work it's important that your Babel setup keeps comments in-tact as the information\nrequired is carryied over to Webpack via so-called magic comments.\n\nThis module exports an additional helper function called `shouldPrintComment` to make this work more easily. It keeps Webpack's Magic Comments and \"Pure\" markers for Uglify compression. You can pass it over to your Babel config like this:\n\n```js\nimport { shouldPrintComment } from \"babel-plugin-smart-webpack-imports\"\n\nexport default {\n  presets: [...],\n  plugins: [...],\n  shouldPrintComment\n}\n```\n\nPlease not that this only works in a JS environment e.g. an exported Rollup or Webpack config. A plain `.babelrc` is not capable of declaring functions or even importing code. With Babel v7 your can use a `.babelrc.js` file as well.\n\n## License\n\n[Apache License Version 2.0, January 2004](license)\n\n## Copyright\n\n\u003cimg src=\"https://cdn.rawgit.com/sebastian-software/sebastian-software-brand/0d4ec9d6/sebastiansoftware-en.svg\" alt=\"Logo of Sebastian Software GmbH, Mainz, Germany\" width=\"460\" height=\"160\"/\u003e\n\nCopyright 2018-2020\u003cbr/\u003e[Sebastian Software GmbH](http://www.sebastian-software.de)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebastian-software%2Fbabel-plugin-smart-webpack-import","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsebastian-software%2Fbabel-plugin-smart-webpack-import","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebastian-software%2Fbabel-plugin-smart-webpack-import/lists"}