Add vite multiple entry config

This commit is contained in:
mashirozx 2021-07-13 11:27:58 +08:00
parent df5129674f
commit f567c296cb
8 changed files with 39 additions and 42 deletions

View File

@ -13,8 +13,8 @@ class ViteRequireHelper
function __construct()
{
add_action('wp_enqueue_scripts', [$this, 'enqueue_common_scripts']);
add_action('wp_enqueue_scripts', [$this, 'enqueue_development_scripts']);
// add_action('wp_enqueue_scripts', [$this, 'enqueue_production_scripts']);
// add_action('wp_enqueue_scripts', [$this, 'enqueue_development_scripts']);
add_action('wp_enqueue_scripts', [$this, 'enqueue_production_scripts']);
// add tag filters
add_filter('script_loader_tag', [$this, 'script_tag_filter'], 10, 3);
add_filter('style_loader_tag', [$this, 'style_tag_filter'], 10, 3);
@ -32,15 +32,15 @@ class ViteRequireHelper
$manifest = $this->get_manifest_file();
// <script type="module" crossorigin src="http://localhost:9000/assets/index.36b06f45.js"></script>
wp_enqueue_script('[type:module]chunk-vendors.js', $assets_base_path . $manifest['index.html']['file'], array(), null, false);
wp_enqueue_script('[type:module]chunk-vendors.js', $assets_base_path . $manifest['src/main.ts']['file'], array(), null, false);
// <link rel="modulepreload" href="http://localhost:9000/assets/vendor.b3a324ba.js">
foreach ($manifest['index.html']['imports'] as $index => $import) {
foreach ($manifest['src/main.ts']['imports'] as $index => $import) {
wp_enqueue_style("[ref:modulepreload]chunk-vendors-{$index}.js", $assets_base_path . $manifest[$import]['file']);
}
// <link rel="stylesheet" href="http://localhost:9000/assets/index.2c78c25a.css">
foreach ($manifest['index.html']['css'] as $index => $path) {
foreach ($manifest['src/main.ts']['css'] as $index => $path) {
wp_enqueue_style("sakura-chunk-{$index}.css", $assets_base_path . $path);
}
}
@ -52,7 +52,7 @@ class ViteRequireHelper
wp_enqueue_style('fontawesome-free', 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css');
// TODO: don't use vue.js as handler
wp_enqueue_script('vue.js', 'https://unpkg.com/vue@next', array(), false, true);
wp_enqueue_script('vue.js', 'https://unpkg.com/vue@next', array(), false, false);
wp_localize_script('vue.js', 'InitState', (new Controllers\InitStateController())->get_initial_state());

View File

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

0
public/.gitkeep Normal file
View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

4
src/admin/App.vue Normal file
View File

@ -0,0 +1,4 @@
<template>
<h1>wp-admin</h1>
<Image src="https://view.moezx.cc/images/2021/07/08/121a00d4db8142384418382abf529364.gif"></Image>
</template>

1
src/admin/README.md Normal file
View File

@ -0,0 +1 @@
# The admin's panel sub-project

13
src/admin/main.ts Normal file
View File

@ -0,0 +1,13 @@
import { createApp } from 'vue'
import { VueSvgIconPlugin } from '@yzfe/vue3-svgicon'
import '@yzfe/svgicon/lib/svgicon.css'
import App from './App.vue'
import { storeProviderPlugin } from '@/hooks/store'
// import { auth, init, posts, comments } from './store'
import { intlPlugin } from '../locales'
const app = createApp(App)
// app.use(storeProviderPlugin, [auth, init, posts, comments])
app.use(intlPlugin)
app.use(VueSvgIconPlugin, { tagName: 'svg-icon' })
app.mount('#app')

View File

@ -29,21 +29,28 @@ export default defineConfig({
// host: '192.168.28.26',
host: 'localhost',
port: 9000,
// path?: string,
// timeout?: number,
// overlay?: boolean
},
},
build: {
target: 'modules',
manifest: true,
sourcemap: true,
outDir: 'app/assets/dist',
chunkSizeWarningLimit: 2048,
// lib: {
// entry: path.resolve(__dirname, 'src/main.ts'),
// name: 'sakura-next',
// formats: ['umd'],
// },
rollupOptions: {
// external: ['vue'],
input: {
main: path.resolve(__dirname, 'src/main.ts'),
admin: path.resolve(__dirname, 'src/admin/main.ts'),
},
output: {
// TODO: use ES5 bundle instead
// globals: {
// vue: 'Vue',
// },
// manualChunks: undefined,
},
},
},
css: {
preprocessorOptions: {
@ -52,19 +59,4 @@ export default defineConfig({
},
},
},
// optimizeDeps: {
// exclude: ['@fortawesome/fontawesome-free'],
// },
// outputDir: path.resolve(__dirname, 'app/dist'),
// publicPath: process.env.NODE_ENV === 'production' ? './' : 'http://localhost:9000/',
// configureWebpack: (config) => {
// config.output.filename = process.env.NODE_ENV === 'production' ? 'sakura-app.[chunkhash].js' : 'sakura-app.js'
// },
// devServer: {
// host: 'localhost',
// port: 9000,
// hot: true,
// disableHostCheck: true,
// headers: { 'Access-Control-Allow-Origin': '*' },
// },
})