vue-native-web/base.js

This is a webpack configuration to allow for Nativescript+Web+Vue templating.

const { resolve } = require('./utils')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const DefinePlugin = require('webpack/lib/DefinePlugin')
const BabelMinify = require('babel-minify-webpack-plugin')

module.exports = function(platform, action) {
  return {
    stats: 'errors-only',
    context: resolve('./src'),
    entry: resolve('./src/app.js'),
    output: {
      filename: `app.${platform}.js`
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loaders: [
            {
              loader: 'babel-loader'
            },
            {
              loader: resolve('./loader', false)
            }
          ]
        },
        {
          test: /\.css$/,
          exclude: /node_modules/,
          use: ExtractTextPlugin.extract({
            use: [
              resolve('./loader', false),
              {
                loader: 'css-loader',
                options: {
                  url: false,
                  includePaths: [resolve('node_modules')]
                }
              }
            ]
          })
        },
        {
          test: /\.sass$/,
          exclude: /node_modules/,
          use: ExtractTextPlugin.extract({
            use: [
              {
                loader: 'css-loader',
                options: {
                  url: false,
                  includePaths: [resolve('node_modules')]
                }
              },
              'sass-loader?indentedSyntax',
              resolve('./loader', false)
            ]
          })
        },
        {
          test: /\.scss$/,
          exclude: /node_modules/,
          use: ExtractTextPlugin.extract({
            use: [
              resolve('./loader', false),
              {
                loader: 'css-loader',
                options: {
                  url: false,
                  includePaths: [resolve('node_modules')]
                }
              },
              'sass-loader'
            ]
          })
        },
        {
          test: /\.vue$/,
          loaders: [
            {
              loader: 'vue-loader',
              options: {
                extractCSS: true
              }
            },
            {
              loader: resolve('./loader?vue', false)
            }
          ]
        }
      ]
    },
    resolve: {
      extensions: [
        '.js',
        '.scss',
        '.sass',
        `.${platform}.css`,
        '.css',
        `.${platform}.scss`,
        '.scss',
        `.${platform}.sass`,
        '.sass',
        `.${platform}.js`,
        '.js',
        '.vue'
      ]
    },
    plugins:
      action === 'build'
        ? [
            new BabelMinify(),
            new ExtractTextPlugin({
              filename: `app.${platform}.css`
            }),
            new DefinePlugin({
              CURRENT_PLATFORM: JSON.stringify(platform)
            })
          ]
        : [
            new ExtractTextPlugin({
              filename: `app.${platform}.css`
            }),
            new DefinePlugin({
              CURRENT_PLATFORM: JSON.stringify(platform)
            })
          ],
    stats: 'minimal'
  }
}