splitted chunks for vue router pages, materialdesignicons styles

build/webpack.config.base.js

@@ -25,11 +25,13 @@ module.exports = {
     'main': utils.resolve(themePath + '/assets/scripts/main.js'),
     // 'lang-en': utils.resolve(langPath + '/en.json'),
     'print': utils.resolve(themePath + '/assets/styles/print.scss')
+    // 'mdi': utils.resolve(themePath + '/assets/styles/mdi/scss/materialdesignicons.scss')
   },
   output: {
+    publicPath: '/themes/custom/materiotheme/assets/dist/',
     path: utils.resolve(themePath + '/assets/dist/'),
     filename: '[name].js',
-    chunkFilename: '[name].js'
+    chunkFilename: '[name].bundle.js'
   },
   module: {
     rules: [
@@ -52,12 +54,12 @@ module.exports = {
       //   type: 'javascript/auto',
       //   loader: '@kazupon/vue-i18n-loader'
       // },
-      {
+      // {
-        test: /\.js$/,
+      //   test: /\.js$/,
-        use: {
+      //   use: {
-          loader: 'babel-loader',
+      //     loader: 'babel-loader',
-        }
+      //   }
-      },
+      // },
       {
         test: /\.(graphql|gql)$/,
         exclude: /node_modules/,
@@ -115,18 +117,23 @@ module.exports = {
   optimization: {
     splitChunks: {
       cacheGroups: {
-        vsa: {
+        // vsa: {
-          test: /[\\/]node_modules[\\/](vue-simple-accordion)[\\/]/,
+        //   test: /[\\/]node_modules[\\/](vue-simple-accordion)[\\/]/,
-          name: 'vsa',
+        //   name: 'vsa',
-          chunks: 'all',
+        //   chunks: 'all',
-          usedExports: true
+        //   usedExports: true
-        },
+        // },
         vclb: {
           test: /[\\/]node_modules[\\/](vue-cool-lightbox)[\\/]/,
           name: 'vclb',
           chunks: 'all',
           usedExports: true
         },
+        // vue_page_article: {
+        //   test: /[\\/]web[\\/]themes[\\/]custom[\\/]materiotheme[\\/]vuejs[\\/]components[\\/]Pages[\\/]Article.vue/,
+        //   name: 'vue_page_article',
+        //   chunks: 'all'
+        // }
       },
     },
   },

web/themes/custom/materiotheme/assets/dist/main.js.LICENSE.txt

@@ -4,12 +4,6 @@
  * Released under the MIT License.
  */
 
-/*!
- * vue-i18n v8.24.2 
- * (c) 2021 kazuya kawaguchi
- * Released under the MIT License.
- */
-
 /*!
  * vue-infinite-loading v2.4.5
  * (c) 2016-2020 PeachScript

web/themes/custom/materiotheme/assets/dist/module-blabla.bundle.js

@@ -0,0 +1 @@
+(self.webpackChunkmaterio_com=self.webpackChunkmaterio_com||[]).push([[67],{4007:(e,t,i)=>{"use strict";i.r(t),i.d(t,{default:()=>p});var a=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{attrs:{id:"blabla"}},[e.items.length?i("div",{staticClass:"cards-list"},[i("ul",e._l(e.items,(function(e){return i("li",{key:e.nid},[i("ArticleCard",{attrs:{item:e}})],1)})),0),e._v(" "),i("infinite-loading",{on:{infinite:e.nextPage}},[i("div",{attrs:{slot:"no-more"},slot:"no-more"},[e._v("No more articles")])])],1):i("div",{staticClass:"loading"},[i("span",[e._v("Loading ...")])])])};a._withStripped=!0;var s=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("article",{staticClass:"card article"},[i("header",[i("h1",[i("a",{attrs:{href:e.item.view_node},domProps:{innerHTML:e._s(e.item.title)},on:{click:function(t){return t.preventDefault(),e.onclick(t)}}})]),e._v(" "),i("aside",{domProps:{innerHTML:e._s(e.item.created)}})]),e._v(" "),i("section",{staticClass:"images"},[i("a",{attrs:{href:e.item.view_node},on:{click:function(t){return t.preventDefault(),e.onclick(t)}}},[i("figure",{domProps:{innerHTML:e._s(e.item.field_visuel)}})])])])};s._withStripped=!0;var n=i(4408);drupalSettings.path.baseUrl,drupalSettings.path.pathPrefix;const r={name:"ArticleCard",router:n.Z,props:["item"],data(){return{alias:this.item.view_node.replace(/^.*\/blabla\//g,"")}},methods:{onclick(){this.alias,this.$router.push({name:"article",params:{alias:this.alias,id:this.item.nid}})}}};var l=i(1900),o=(0,l.Z)(r,s,[],!1,null,"08b811fe",null);o.options.__file="web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue";const c=o.exports;var m=i(629);const d={name:"Blabla",computed:{...(0,m.rn)({items:e=>e.Blabla.items})},created(){this.items.length||this.getItems()},methods:{...(0,m.nv)({getItems:"Blabla/getItems",nextPage:"Blabla/nextPage"})},components:{ArticleCard:c}};var u=(0,l.Z)(d,a,[],!1,null,"230b184d",null);u.options.__file="web/themes/custom/materiotheme/vuejs/components/Pages/Blabla.vue";const p=u.exports}}]);

web/themes/custom/materiotheme/assets/dist/module-mdi.bundle.js

@@ -0,0 +1 @@
+(self.webpackChunkmaterio_com=self.webpackChunkmaterio_com||[]).push([[462],{4834:(e,c,s)=>{"use strict";s.r(c)}}]);

web/themes/custom/materiotheme/assets/dist/module-pricing.css

@@ -0,0 +1,8 @@
+.overlay[data-v-b98ce164]{background-color:rgba(0,0,0,0.8);position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999}.modal[data-v-b98ce164]{background-color:#fff;position:absolute;box-sizing:border;max-width:80vw;max-height:70vh;top:0;right:0;bottom:0;left:0;margin:auto;padding:1em;border-radius:3px;box-shadow:2px 2px}
+
+.form-item[data-v-7bb795f8],.form-actions[data-v-7bb795f8]{display:inline-block;max-width:32%;margin:0}input[data-v-7bb795f8]{box-sizing:border-box;max-width:100%}div.description[data-v-7bb795f8]{display:none}.form-item-persistent-login[data-v-7bb795f8]{display:none}
+
+.form-type-email[data-v-2acc57a0],.form-type-password-confirm[data-v-2acc57a0]{max-width:30%;margin:0}.form-type-password input.weak[data-v-2acc57a0]{border-width:2px;border-color:red !important}.form-type-password input.weak[data-v-2acc57a0]:focus{outline:none}.form-type-password input.medium[data-v-2acc57a0]{border-width:2px;border-color:orange !important}.form-type-password input.medium[data-v-2acc57a0]:focus{outline:none}.form-type-password input.strong[data-v-2acc57a0]{border-width:2px;border-color:green !important}.form-type-password input.strong[data-v-2acc57a0]:focus{outline:none}input[data-v-2acc57a0]{box-sizing:content-box;max-width:100%}label[data-v-2acc57a0],div.description[data-v-2acc57a0]{display:none}
+
+fieldset[data-v-340aa566]{padding:0;margin:0;border:none}
+

web/themes/custom/materiotheme/assets/dist/module-showrooms.bundle.js

@@ -0,0 +1 @@
+(self.webpackChunkmaterio_com=self.webpackChunkmaterio_com||[]).push([[204],{281:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>u});var o=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{attrs:{id:"showrooms"}},[e.items.length?e._l(e.items,(function(e){return s("Showroom",{key:e.uuid,attrs:{item:e}})})):s("div",{staticClass:"loading"},[s("span",[e._v("Loading ...")])])],2)};o._withStripped=!0;var i=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("article",{staticClass:"showroom"},[s("header",[s("h1",{domProps:{innerHTML:e._s(e.item.name)}})]),e._v(" "),s("section",{staticClass:"images"},[s("figure",{domProps:{innerHTML:e._s(e.item.field_visuels)}})]),e._v(" "),s("section",{staticClass:"content"},[s("address",{domProps:{innerHTML:e._s(e.item.field_public_address)}}),e._v(" "),s("div",{staticClass:"phone",domProps:{innerHTML:e._s(e.item.field_public_phone)}}),e._v(" "),s("div",{staticClass:"email",domProps:{innerHTML:e._s(e.item.field_public_email)}})])])};i._withStripped=!0;var r=s(4408);drupalSettings.path.baseUrl,drupalSettings.path.pathPrefix;const n={name:"Showroom",router:r.Z,props:["item"]};var m=s(1900),a=(0,m.Z)(n,i,[],!1,null,"695652b0",null);a.options.__file="web/themes/custom/materiotheme/vuejs/components/Content/Showroom.vue";const l=a.exports;var c=s(629);const h={name:"Showrooms",computed:{...(0,c.rn)({items:e=>e.Showrooms.items})},created(){this.items.length||this.getItems()},methods:{...(0,c.nv)({getItems:"Showrooms/getItems"})},components:{Showroom:l}};var p=(0,m.Z)(h,o,[],!1,null,"7566e5fe",null);p.options.__file="web/themes/custom/materiotheme/vuejs/components/Pages/Showrooms.vue";const u=p.exports}}]);

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -51,9 +51,13 @@ import VHeaderMenu from 'vuejs/components/Content/HeaderMenu'
 
 import { mapState } from 'vuex'
 
-// require('theme/assets/styles/main.scss');
 import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
 import 'slim-select/slimselect.min.css'
+import(
+  /* webpackChunkName: "module-mdi" */
+  /* webpackPrefetch: true */
+  /* webpackPreload: true */
+  'theme/assets/styles/mdi/scss/materialdesignicons.scss')
 import 'theme/assets/styles/main.scss'
 import 'theme/assets/styles/print.scss'
 

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -2,7 +2,9 @@
 // @import '~slim-select/scss';
 
 $mdi-font-path: './mdi/fonts/';
-@import './mdi/scss/materialdesignicons';
+// @import './mdi/scss/materialdesignicons';
+@import './mdi/scss/variables';
+@import './mdi/scss/functions';
 @import './base/variables';
 @import './base/colors';
 @import './base/reset';

web/themes/custom/materiotheme/materiotheme.libraries.yml

@@ -10,7 +10,7 @@ global-js:
   version: VERSION
   js:
     assets/dist/main.js: { }
-    assets/dist/vsa.js: { }
+    # assets/dist/vsa.js: { }
     assets/dist/vclb.js: { }
   dependencies:
     - core/drupal

web/themes/custom/materiotheme/vuejs/route/index.js

@@ -2,12 +2,54 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 import Home from 'vuejs/components/Pages/Home'
-import Base from 'vuejs/components/Pages/Base'
+// const Home = () => import(
-import Thematique from 'vuejs/components/Pages/Thematique'
+//   /* webpackMode: "lazy" */
-import Blabla from 'vuejs/components/Pages/Blabla'
+//   /* webpackPrefetch: true */
-import Article from 'vuejs/components/Pages/Article'
+//   /* webpackPreload: true */
-import Showrooms from 'vuejs/components/Pages/Showrooms'
+//   'vuejs/components/Pages/Home')
-import Pricing from 'vuejs/components/Pages/Pricing'
+// // import Base from 'vuejs/components/Pages/Base'
+const Base = () => import(
+  /* webpackChunkName: "module-base" */
+  /* webpackMode: "lazy" */
+  /* webpackPrefetch: true */
+  /* webpackPreload: true */
+  'vuejs/components/Pages/Base')
+// import Thematique from 'vuejs/components/Pages/Thematique'
+const Thematique = () => import(
+  /* webpackChunkName: "module-thematique" */
+  /* webpackMode: "lazy" */
+  /* webpackPrefetch: true */
+  /* webpackPreload: true */
+  'vuejs/components/Pages/Thematique')
+// import Blabla from 'vuejs/components/Pages/Blabla'
+const Blabla = () => import(
+  /* webpackChunkName: "module-blabla" */
+  /* webpackMode: "lazy" */
+  /* webpackPrefetch: true */
+  /* webpackPreload: true */
+  'vuejs/components/Pages/Blabla')
+// import Article from 'vuejs/components/Pages/Article'
+const Article = () => import(
+  /* webpackChunkName: "module-article" */
+  /* webpackMode: "lazy" */
+  /* webpackPrefetch: true */
+  /* webpackPreload: true */
+  'vuejs/components/Pages/Article')
+// import Showrooms from 'vuejs/components/Pages/Showrooms'
+const Showrooms = () => import(
+  /* webpackChunkName: "module-showrooms" */
+  /* webpackMode: "lazy" */
+  /* webpackPrefetch: true */
+  /* webpackPreload: true */
+  'vuejs/components/Pages/Showrooms')
+// import Pricing from 'vuejs/components/Pages/Pricing'
+const Pricing = () => import(
+  /* webpackChunkName: "module-pricing" */
+  /* webpackMode: "lazy" */
+  /* webpackPrefetch: true */
+  /* webpackPreload: true */
+  'vuejs/components/Pages/Pricing')
+
 // import Cart from 'vuejs/components/Pages/Cart'
 
 Vue.use(VueRouter)