integrated vuejs into theme (builded with webpack

build/utils.js

@@ -0,0 +1,14 @@
+'use strict'
+
+const path = require('path')
+
+module.exports = {
+  resolve: function (dir) {
+    return path.join(__dirname, '..', dir)
+  },
+
+  assetsPath: function (_path) {
+    const assetsSubDirectory = 'static'
+    return path.posix.join(assetsSubDirectory, _path)
+  }
+}

build/webpack.config.base.js

@@ -0,0 +1,85 @@
+'use strict'
+
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const { VueLoaderPlugin } = require('vue-loader')
+
+const utils = require('./utils')
+
+const themePath = 'web/themes/custom/materiotheme'
+
+module.exports = {
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'theme': utils.resolve(themePath),
+      'vuejs': utils.resolve(themePath+'/vuejs')
+    }
+  },
+  entry: {
+    'main': utils.resolve(themePath + '/assets/scripts/main.js'),
+  },
+  output: {
+    path: utils.resolve(themePath + '/assets/dist/'),
+    filename: '[name].js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        exclude: /node_modules/,
+        options: {
+          emitError: true,
+          emitWarning: true
+        }
+      },
+      {
+        test: /\.vue$/,
+        use: 'vue-loader'
+      },
+      {
+        test: /\.js$/,
+        use: {
+          loader: 'babel-loader',
+        }
+      }
+      // , {
+      //   test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+      //   use: {
+      //     loader: 'url-loader',
+      //     options: {
+      //       limit: 10000,
+      //       name: utils.assetsPath('img/[name].[hash:7].[ext]')
+      //     }
+      //   }
+      // }, {
+      //   test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+      //   use: {
+      //     loader: 'url-loader',
+      //     options: {
+      //       limit: 10000,
+      //       name: utils.assetsPath('media/[name].[hash:7].[ext]')
+      //     }
+      //   }
+      // }, {
+      //   test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+      //   use: {
+      //     loader: 'url-loader',
+      //     options: {
+      //       limit: 10000,
+      //       name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+      //     }
+      //   }
+      // }
+    ]
+  },
+
+  plugins: [
+    new MiniCssExtractPlugin({
+      path: utils.resolve(themePath + '/assets/dist/'),
+      filename: '[name].css'
+    }),
+    new VueLoaderPlugin()
+  ]
+}

build/webpack.config.dev.js

@@ -0,0 +1,39 @@
+'use strict'
+
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const baseConfig = require('./webpack.config.base')
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+module.exports = merge(baseConfig, {
+  mode: 'development',
+
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          process.env.NODE_ENV !== 'production'
+            ? 'vue-style-loader'
+            : MiniCssExtractPlugin.loader,
+          // 'vue-style-loader',
+          'css-loader'
+        ]
+      }, {
+        test: /\.scss$/,
+        use: [
+          process.env.NODE_ENV !== 'production'
+            ? 'vue-style-loader'
+            : MiniCssExtractPlugin.loader,
+          // 'vue-style-loader',
+          'css-loader',
+          'sass-loader'
+        ]
+      }
+    ]
+  },
+
+  plugins: [
+    // new webpack.HotModuleReplacementPlugin()
+  ]
+})

build/webpack.config.prod.js

@@ -0,0 +1,43 @@
+'use strict'
+
+const merge = require('webpack-merge')
+const baseConfig = require('./webpack.config.base')
+const MiniCssExtractPlugin  = require('mini-css-extract-plugin')
+
+module.exports = merge(baseConfig, {
+  mode: 'production',
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        commons: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendor",
+          chunks: "all",
+        },
+      },
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css?$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader'
+        ]
+      }, {
+        test: /\.styl(us)?$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader'
+        ]
+      }
+    ]
+  },
+  plugins: [
+    // new MiniCssExtractPlugin({
+    //   filename: 'main.css'
+    // })
+  ]
+})