logo
指南
配置
插件
指南
配置
插件
简体中文

plugins

EMP v3的功能拓展。 插件执行顺序是并行、可以考虑使用 lifeCycle 进行时序设置

以Vue 3.0为例

安装插件

npm
yarn
pnpm
bun
npm add @empjs/plugin-vue3

配置插件

emp-config.js
import Vue3 from '@empjs/plugin-vue3'
import {defineConfig} from '@empjs/cli'

export default defineConfig(({mode, env}) => {
  return {
    plugins: [Vue3()],
    appEntry: 'main.ts',
  }
})

插件的基本结构

入口文件
import type {GlobalStore} from '@empjs/cli'
//
export default () => {
  return {
    name: '@empjs/plugin-vue3',
    async rsConfig(store: GlobalStore) {
      const {chain} = store
       // 重置chain的配置
      store.merge({
        experiments: {
          rspackFuture: {
            newTreeshaking: true,
          },
        },
      })
      // 修改chain的配置
      chain.module.rule('javascript').test(/\.js$/)

      // module 实例 
      chain.module
        .rule('vue-loader')
        .test(/\.vue$/)
        .use('vue-loader')
        .loader(require.resolve('vue-loader'))
        .options({})
        .end()
    },
  }
}