# import-meta-loader

> The plugin allows you to use vite's `import.meta` syntax with webpack

Latest version **1.1.0** (published 2022-12-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install import-meta-loader
pnpm add import-meta-loader
yarn add import-meta-loader
bun add import-meta-loader
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-12-11 |
| First published | 2022-08-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Xiaolin Zhu |
| Maintainers | xiaolinzhu |
| Keywords | webpack, loader, require, import-meta-loader, vite |

## Links

- npm: https://www.npmjs.com/package/import-meta-loader
- npm.io page: https://npm.io/package/import-meta-loader

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2022-12-11
- 1.0.6 — 2022-09-19
- 1.0.4 — 2022-08-28

## README

# import-meta-loader

The plugin allows you to use vite's `import.meta` syntax with webpack

## Install

```bash
npm install import-meta-loader --save-dev
# or
yarn add import-meta-loader -D
```

## Usage

### For vue-cli
```js
// vue.config.js
const importMetaLoader = require('import-meta-loader')
const path = require('path')

module.exports = {
  // ...
  chainWebpack: (config) => {
    config.module.rule('js')
      .test(/\.js$/)
      .exclude.add(path.resolve('node_modules'))
      .end()
      .use(importMetaLoader)
      .loader('import-meta-loader')
      .options({
        // isVite2: true,
        alias: Object.fromEntries(config.resolve.alias.store)
      })
      .end()
    importMetaLoader.expandVueEnv(config) // make vue cli support environment variables that start width "VITE_APP_" 
    importMetaLoader.moveHtmlTemplate(config) // you need to move /public/index.html to /index.html, /index.html will be the entry
  }
}
```

### For webpack
```js
// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          // ...
          {
            loader: 'import-meta-loader',
            options: {
              // isVite2: true,
              // alias: {}
            }
          }
        ]
      }
    ]
  }
}
```
## Options

| name    | value                    | description                                            |
| ------- | ------------------------ | ------------------------------------------------------ |
| isVite2 | Boolean (default: false) | vite2 returns a different value than vite3             |
| alias   | Object                   | If an alias is configured, you need to set this option |

## Supported API

| API                                                    | Description                                                  |
| ------------------------------------------------------ | ------------------------------------------------------------ |
| new URL('filePath', import.meta.url).href              | **Static Asset URL:** `import.meta.url` is a native ESM feature that exposes the current module's URL. Combining it with the native URL constructor, we can obtain the full, resolved URL of a static asset using relative path from a JavaScript module: |
| import.meta.glob('filePath')                           | **Lazy Loaded:** Matched files are by default lazy-loaded via dynamic import and will be split into separate chunks during build. |
| import.meta.glob('filePath', { eager: true })          | **Sync Loaded:** import all the modules directly             |
| import.meta.glob('filePath', { import: 'exportName' }) | **Named Imports:** It's possible to only import parts of the modules with the `import` options. |
| import.meta.glob(['filePath1', 'filePath2'])           | **Multiple Patterns:** The first argument can be an array of globs |
| import.meta.glob(['./dir/*.js', '!**/bar.js'])         | **Negative Patterns:** Negative glob patterns are also supported (prefixed with `!`). To ignore some files from the result, you can add exclude glob patterns to the first argument |



## Examples

```js
// vite => webpack
import.meta.env //=> process.env
import.meta.env.MODE //=> process.env.NODE_ENV
import.meta.env.BASE_URL //=> process.env.BASE_URL
import.meta.env.PROD //=> process.env.NODE_ENV === 'production'
import.meta.env.DEV //=> process.env.NODE_ENV !== 'production'

new URL('filePath', import.meta.url).href //=> require('filePath')

import.meta.glob('filePath') //=> ... require.context('dirPath', useSubdirectories: boolean, RegExp, 'lazy') ...
import.meta.glob('filePath', { eager: true }) //=> vite3 ... require.context('dirPath', useSubdirectories: boolean, RegExp, 'sync') ...
import.meta.globEager('filePath') //=> vite2 ... require.context('dirPath', useSubdirectories: boolean, RegExp, 'sync') ...

// Negative Patterns, Multiple Patterns, Sync Loaded, Named Imports
import.meta.glob(['./dir/*.js', '!**/bar.js'], { import: 'YourExportName', eager: true })
```

## Template

[https://github.com/XiaoLin1995/vuecli-vite-template](https://github.com/XiaoLin1995/vuecli-vite-template)




## License

MIT

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