https://github.com/seldszar/yael
Yet another entry loader for Webpack
https://github.com/seldszar/yael
entry loader webpack webpack-plugin
Last synced: 3 months ago
JSON representation
Yet another entry loader for Webpack
- Host: GitHub
- URL: https://github.com/seldszar/yael
- Owner: Seldszar
- License: mit
- Created: 2020-09-27T14:30:13.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-03-28T19:27:41.000Z (about 4 years ago)
- Last Synced: 2025-02-20T02:18:32.629Z (4 months ago)
- Topics: entry, loader, webpack, webpack-plugin
- Language: JavaScript
- Homepage:
- Size: 23.4 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# @seldszar/yael
> Yet another entry wrapper for Webpack
## Table of Contents
- [Install](#install)
- [Usage](#usage)
- [API](#api)
- [Author](#author)
- [License](#license)
# Install
```bash
$ npm install @seldszar/yael
```
# Usage
Let's consider the following project structure using Vue.js:
```
src/
├── entry-template.js
└── app.vue
```
Here's the `webpack.config.js` configuration:
```javascript
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
entry: './src/app.vue',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
]
};
```
In `src/entry-template.js`, export a function taking the original entry & the context as arguments:
```javascript
import { createApp } from 'vue';
export default (App, { target }) => {
const app = createApp(App, {
message: 'Hello World'
});
if (target === 'web') {
app.mount('#app');
}
return app;
};
```
## Using the wrapper
If you prefer a more granular approach, you can manually apply with `wrapEntry`:
```javascript
const { wrapEntry } = require('@seldszar/yael');
module.exports = {
entry: wrapEntry('./src/app.vue', {
template: './src/entry-template.js'
}),
// ...
};
```
## Using the plugin
Register the plugin in your Webpack configuration and set the `template` path:
```javascript
const { EntryWrapperPlugin } = require('@seldszar/yael');
module.exports = {
// ...
plugins: [
// ...
new EntryWrapperPlugin({
template: './src/entry-template.js'
})
]
};
```
## API
See the [declaration file](./index.d.ts).
## Author
Alexandre Breteau - [@0xSeldszar](https://twitter.com/0xSeldszar)
## License
MIT © [Alexandre Breteau](https://seldszar.fr)