The plugin allows you to use vite's import.meta syntax with webpack
npm install import-meta-loader --save-dev
# or
yarn add import-meta-loader -D// 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
}
}// webpack.config.js
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.js$/,
exclude: /node_modules/,
use: [
// ...
{
loader: 'import-meta-loader',
options: {
// isVite2: true,
// alias: {}
}
}
]
}
]
}
}| 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 |
| 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 |
// 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 })https://github.com/XiaoLin1995/vuecli-vite-template
MIT