import { VueLoaderPlugin } from 'vue-loader'; import { merge } from 'webpack-merge'; import Config from 'webpack-chain'; import fs from 'fs'; import { hasDependency } from '../helpers/dependencies'; import { getPlatformName } from '../helpers/platform'; import { env as _env, IWebpackEnv } from '../index'; import { error } from '../helpers/log'; import base from './base'; export default function (config: Config, env: IWebpackEnv = _env): Config { base(config, env); const platform = getPlatformName(); // we need to patch VueLoader if we want to enable hmr if (env.hmr) { patchVueLoaderForHMR(); } // resolve .vue files // the order is reversed because we are using prepend! config.resolve.extensions.prepend('.vue').prepend(`.${platform}.vue`); // add a rule for .vue files config.module .rule('vue') .test(/\.vue$/) .use('vue-loader') .loader('vue-loader') .tap((options) => { return { ...options, compiler: require('nativescript-vue-template-compiler'), }; }); // set up ts support in vue files config.module .rule('ts') .use('ts-loader') .loader('ts-loader') .tap((options = {}) => { return merge(options, { appendTsSuffixTo: ['\\.vue$'], }); }); config.when(hasDependency('typescript'), (config) => { config.plugin('ForkTsCheckerWebpackPlugin').tap((args) => { args[0] = merge(args[0], { typescript: { extensions: { vue: { enabled: true, compiler: 'nativescript-vue-template-compiler', }, }, }, }); return args; }); }); // add VueLoaderPlugin as the first plugin config .plugin('VueLoaderPlugin') // @ts-ignore .before(config.plugins.values()[0].name) .use(VueLoaderPlugin); // add an alias for vue, since some plugins may try to import it config.resolve.alias.set('vue', 'nativescript-vue'); return config; } /** * Patches source of vue-loader to set the isServer flag to false * so hmr gets enabled. */ function patchVueLoaderForHMR() { try { const vueLoaderPath = require.resolve('vue-loader/lib/index.js'); const source = fs.readFileSync(vueLoaderPath).toString(); const patchedSource = source.replace( /(isServer\s=\s)(target\s===\s'node')/g, '$1false;' ); fs.writeFileSync(vueLoaderPath, patchedSource); delete require.cache[vueLoaderPath]; } catch (err) { error('Failed to patch VueLoader - HMR may not work properly!'); } }