Webpack configuration not working with matfish2/vue-tables-2

.babelrc

{
  "comments": false,
  "env": {
    "main": {
      "presets": [
        [
          "env",
          {
            "modules": false,
            "targets": {
              "browsers": ["> 1%", "last 2 versions", "not ie <= 8"],
              "node": 7
            },
            "useBuiltIns": true
          }
        ],
        "stage-3"
      ],
      "plugins": [
        "transform-runtime",
        "transform-decorators-legacy",
        "transform-class-properties"
      ]
    },
    "test": {
      "presets": [
        [
          "env",
          {
            "targets": { "node": 7 },
            "useBuiltIns": true
          }
        ],
        "stage-3"
      ],
      "plugins": [
        "istanbul",
        "transform-decorators-legacy",
        "transform-class-properties"
      ]
    }
  }
}

build.js

'use strict';
require('./check-versions')();

process.env.NODE_ENV = 'production';
process.env.npm_config_platform = (process.env.npm_config_platform)
    ? process.env.npm_config_platform
    : '';
process.env.npm_config_environment = (process.env.npm_config_environment)
    ? process.env.npm_config_environment
    : 'production';

const ora = require('ora');
const rm = require('rimraf');
const path = require('path');
const chalk = require('chalk');
const webpack = require('webpack');
const config = require('../config');
const webpackConfig = require('./webpack.prod.conf');

const spinner = ora('building for production...');

const packageJson = require('../package.json');
const archiver = require('archiver');
const fs = require('fs');
const moment = require('moment');

spinner.start();

// step 1: clear build directory
rm(path.join(config.build.assetsRoot, process.env.npm_config_platform), (err) => {
    if (err) {
        throw err;
    }

    // step 2: build project with webpack
    webpack(webpackConfig, function (err, stats) {
        spinner.stop();

        if (err) {
            throw err;
        }

        process.stdout.write(stats.toString({
            colors: true,
            modules: false,
            children: false,
            chunks: false,
            chunkModules: false
        }) + '\n\n');

        if (stats.hasErrors()) {
            console.log(chalk.red('  Build failed with errors.\n'));
            process.exit(1);
        }

        console.log(chalk.cyan('  Build complete.\n'));
        console.log(chalk.yellow(
            '  Tip: built files are meant to be served over an HTTP server.\n' +
            '  Opening index.html over file:// won\'t work.\n'
        ));

        // step 3: archive dist folder as zip
        const packageName = `${packageJson.name}_${process.env.npm_config_environment}_${packageJson.version}.` +
                            `${packageJson.build}_${process.env.npm_config_platform}_${moment().format('YYYYMMDD')}.` +
                            `${process.env.npm_config_platform === 'tizen' ? 'wgt' : 'zip'}`;

        rm(path.join(config.build.archiveRoot, packageName), (err) => {
            if (err) {
                throw err;
            }

            if (!fs.existsSync(config.build.archiveRoot)) {
                fs.mkdirSync(config.build.archiveRoot);
            }

            const output = fs.createWriteStream(path.join(config.build.archiveRoot, packageName));
            const archive = archiver('zip');

            archive.on('error', (err) => {
                if (err) {
                    throw err;
                }
            });

            archive.on('close', () => {
                console.log(chalk.green(`created archive: ${path.join(config.build.archiveRoot, packageName)}\n`));
            });

            archive.pipe(output);
            archive.directory(webpackConfig.output.path, false);
            archive.finalize();
        });
    });
});

check-versions.js

'use strict';
const chalk = require('chalk');
const semver = require('semver');
const packageConfig = require('../package.json');
const shell = require('shelljs');

function exec (cmd) {
    return require('child_process').execSync(cmd).toString().trim();
}

const versionRequirements = [
    {
        name: 'node',
        currentVersion: semver.clean(process.version),
        versionRequirement: packageConfig.engines.node
    }
];

if (shell.which('npm')) {
    versionRequirements.push({
        name: 'npm',
        currentVersion: exec('npm --version'),
        versionRequirement: packageConfig.engines.npm
    });
}

module.exports = function () {
    const warnings = [];

    for (let i = 0; i < versionRequirements.length; i++) {
        const mod = versionRequirements[i];
        if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
            warnings.push(
                mod.name + ': ' +
                chalk.red(mod.currentVersion) + ' should be ' +
                chalk.green(mod.versionRequirement)
            );
        }
    }

    if (warnings.length) {
        console.log('');
        console.log(chalk.yellow('To use this template, you must update following to modules:'));
        console.log();

        for (let i = 0; i < warnings.length; i++) {
            const warning = warnings[i];
            console.log('  ' + warning);
        }

        console.log();
        process.exit(1);
    }
};

config-index.js

'use strict';
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path');

module.exports = {
    build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        archiveRoot: path.resolve(__dirname, '../archive'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        productionSourceMap: false,
        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: true,
        productionGzipExtensions: ['js', 'css', 'png', 'jpg', 'jpeg', 'gif'],
        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
    },
    dev: {
        env: require('./dev.env'),
        port: process.env.PORT || 8080,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {},
        // CSS Sourcemaps off by default because relative paths are "buggy"
        // with this option, according to the CSS-Loader README
        // (https://github.com/webpack/css-loader#sourcemaps)
        // In our experience, they generally work as expected,
        // just be aware of this issue when enabling this option.
        cssSourceMap: false
    }
};

dev-client.js

/* eslint-disable */
'use strict';
require('eventsource-polyfill');
const hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true');

hotClient.subscribe(function (event) {
    if (event.action === 'reload') {
        window.location.reload();
    }
});

dev-server.js

'use strict';
require('./check-versions')();

const config = require('../config');

if (!process.env.NODE_ENV) {
    process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV);
}

const opn = require('opn');
const path = require('path');
const express = require('express');
const webpack = require('webpack');
const proxyMiddleware = require('http-proxy-middleware');
const webpackConfig = (process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'production')
    ? require('./webpack.prod.conf')
    : require('./webpack.dev.conf');

// default port where dev server listens for incoming traffic
const port = process.env.PORT || config.dev.port;
// automatically open browser, if not set will be false
const autoOpenBrowser = !!config.dev.autoOpenBrowser;
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
const proxyTable = config.dev.proxyTable;

const app = express();
const compiler = webpack(webpackConfig);

const devMiddleware = require('webpack-dev-middleware')(compiler, {
    publicPath: webpackConfig.output.publicPath,
    quiet: true
})

const hotMiddleware = require('webpack-hot-middleware')(compiler, {
    log: false,
    heartbeat: 2000
})
// force page reload when html-webpack-plugin template changes
// currently disabled until this is resolved:
// https://github.com/jantimon/html-webpack-plugin/issues/680
// compiler.plugin('compilation', function (compilation) {
//   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
//     hotMiddleware.publish({ action: 'reload' })
//     cb()
//   })
// })

// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware);

// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
    const options = proxyTable[context];

    if (typeof options === 'string') {
        options = { target: options };
    }

    app.use(proxyMiddleware(options.filter || context, options));
});

// handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')());

// serve webpack bundle output
app.use(devMiddleware);

// serve pure static assets
const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory);
app.use(staticPath, express.static('./static'));

const uri = 'http://localhost:' + port;

let _resolve;
let _reject;
let readyPromise = new Promise((resolve, reject) => {
    _resolve = resolve;
    _reject = reject;
});

let server;
let portfinder = require('portfinder');
portfinder.basePort = port;

console.log('> Starting dev server...');
devMiddleware.waitUntilValid(() => {
    portfinder.getPort((err, port) => {
        if (err) {
            _reject(err);
        }

        process.env.PORT = port;
        let uri = 'http://localhost:' + port;
        console.log('> Listening at ' + uri + '\n');

        // when env is testing, don't need open it
        if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
            opn(uri);
        }

        server = app.listen(port);
        _resolve();
    });
});

module.exports = {
    ready: readyPromise,
    close: () => {
        server.close();
    }
};

dev.env.js

'use strict';
const merge = require('webpack-merge');
const prodEnv = require('./prod.env');

module.exports = merge(prodEnv, {
    NODE_ENV: '"development"'
});

package.json

{
  "main": "index.html",
  "directories": {
    "doc": "docs",
    "test": "tests"
  },
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "preview": "npm run build && cd dist && run-js",
    "unit": "karma start tests/unit/karma.conf.js --single-run",
    "e2e": "node tests/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "npm run lint:js && npm run lint:scss",
    "lint:js": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
    "lint:js:fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs",
    "lint:fix": "npm run lint:js:fix",
    "lint:scss": "sass-lint --verbose"
  },
  "engines": {
    "node": "^6.11.4 || ^8.7.0",
    "npm": "^3.10.10 || ^5.4.2",
    "yarn": "^1.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "dependencies": {
    "axios": "^0.17.1",
    "bootstrap-vue": "^2.0.0-rc.1",
    "font-awesome": "^4.7.0",
    "js-logger": "^1.4.1",
    "leaflet": "^1.3.1",
    "leaflet.heat": "Leaflet/Leaflet.heat",
    "leaflet.markercluster": "^1.3.0",
    "lodash": "^4.17.5",
    "moment": "^2.20.1",
    "normalize.css": "^8.0.0",
    "numeral": "^2.0.6",
    "perfect-scrollbar": "^1.3.0",
    "simpleheat": "^0.4.0",
    "uuid": "^3.2.1",
    "vue": "^2.5.13",
    "vue-analytics": "^5.9.0",
    "vue-awesome": "^2.3.4",
    "vue-class-component": "^6.2.0",
    "vue-events": "^3.1.0",
    "vue-i18n": "^7.4.2",
    "vue-izitoast": "^1.0.1",
    "vue-localstorage": "^0.6.1",
    "vue-lodash": "^1.0.4",
    "vue-meta": "^1.4.3",
    "vue-property-decorator": "^6.0.0",
    "vue-router": "^3.0.1",
    "vue-tables-2": "^1.3.40",
    "vue2-filters": "^0.3.0",
    "vuex": "^3.0.1",
    "vuex-class": "^0.3.0"
  },
  "devDependencies": {
    "@vue/test-utils": "^1.0.0-beta.11",
    "archiver": "^2.1.1",
    "autoprefixer": "^8.0.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-istanbul": "^4.1.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-3": "^6.24.1",
    "babel-register": "^6.26.0",
    "chai": "^4.1.2",
    "chalk": "^2.3.1",
    "chromedriver": "^2.35.0",
    "compression-webpack-plugin": "^1.1.7",
    "connect-history-api-fallback": "^1.5.0",
    "copy-webpack-plugin": "^4.4.1",
    "cross-env": "^5.1.3",
    "cross-spawn": "^6.0.4",
    "css-loader": "^0.28.9",
    "es6-promise": "^4.2.4",
    "eslint": "^4.18.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^4.0.2",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-node": "^6.0.0",
    "eslint-plugin-promise": "^3.6.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.16.2",
    "extract-text-webpack-plugin": "^3.0.2",
    "favicons-webpack-plugin": "^0.0.7",
    "file-loader": "^1.1.6",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "http-proxy-middleware": "^0.17.4",
    "http-server": "^0.11.1",
    "img-loader": "^2.0.1",
    "inject-loader": "^3.0.1",
    "istanbul-instrumenter-loader": "^3.0.0",
    "json-loader": "^0.5.7",
    "karma": "^2.0.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage": "^1.1.1",
    "karma-junit-reporter": "^1.2.0",
    "karma-mocha": "^1.3.0",
    "karma-mocha-reporter": "^2.2.5",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-phantomjs-shim": "^1.5.0",
    "karma-sinon": "^1.0.5",
    "karma-source-map-support": "^1.2.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "^0.0.32",
    "karma-webpack": "^2.0.9",
    "minimist": "^1.2.0",
    "mocha": "^5.0.1",
    "ncp": "^2.0.0",
    "nightwatch": "^0.9.19",
    "node-sass": "^4.7.2",
    "opn": "^5.2.0",
    "opn-cli": "^3.1.0",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.4.0",
    "phantomjs-prebuilt": "^2.1.16",
    "portfinder": "^1.0.13",
    "postcss-loader": "^2.1.0",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "raw-loader": "^0.5.1",
    "remap-istanbul": "^0.10.1",
    "rimraf": "^2.6.2",
    "run-js": "^2.1.1",
    "sass-lint": "^1.12.1",
    "sass-loader": "^6.0.6",
    "selenium-server": "^3.9.1",
    "semver": "^5.5.0",
    "shelljs": "^0.8.1",
    "sinon": "^4.3.0",
    "sinon-chai": "^2.14.0",
    "style-loader": "^0.20.2",
    "uglify-es": "^3.3.9",
    "uglifyjs-webpack-plugin": "^1.2.0",
    "url-loader": "^0.6.2",
    "vue-loader": "^14.1.1",
    "vue-style-loader": "^4.0.2",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^3.11.0",
    "webpack-bundle-analyzer": "^2.10.0",
    "webpack-dev-middleware": "^2.0.5",
    "webpack-dev-server": "^2.11.1",
    "webpack-hot-middleware": "^2.21.0",
    "webpack-merge": "^4.1.1"
  }
}

utils.js

'use strict';
const path = require('path');
const config = require('../config');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

exports.assetsPath = function (_path) {
    const assetsSubDirectory = (process.env.NODE_ENV === 'production')
        ? config.build.assetsSubDirectory
        : config.dev.assetsSubDirectory;
    return path.posix.join(assetsSubDirectory, _path);
};

exports.cssLoaders = function (options) {
    options = options || {};

    const cssLoader = {
        loader: 'css-loader',
        options: {
            minimize: process.env.NODE_ENV === 'production',
            sourceMap: options.sourceMap
        }
    };

    // generate loader string to be used with extract text plugin
    function generateLoaders (loader, loaderOptions) {
        const loaders = [cssLoader]
        if (loader) {
            loaders.push({
                loader: loader + '-loader',
                options: Object.assign({}, loaderOptions, {
                    sourceMap: options.sourceMap
                })
            });
        }

        // Extract CSS when that option is specified
        // (which is the case during production build)
        if (options.extract) {
            return ExtractTextPlugin.extract({
                use: loaders,
                fallback: 'vue-style-loader',
                publicPath: "../../"
            });
        } else {
            return ['vue-style-loader'].concat(loaders);
        }
    }

    // https://vue-loader.vuejs.org/en/configurations/extract-css.html
    return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less'),
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass', {
            includePaths: [
                path.join(__dirname, '../src/styles'),
                path.join(__dirname, '../node_modules/font-awesome/scss')
            ]
        }),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
    };
};

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
    const output = [];
    const loaders = exports.cssLoaders(options);
    for (const extension in loaders) {
        const loader = loaders[extension];
        output.push({
            test: new RegExp('\\.' + extension + '$'),
            use: loader
        });
    }
    return output;
}

vue-loader.conf.js

'use strict';
const utils = require('./utils');
const config = require('../config');
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
    loaders: utils.cssLoaders({
        sourceMap: (isProduction)
            ? config.build.productionSourceMap
            : config.dev.cssSourceMap,
        extract: isProduction
    }),
    transformToRequire: {
        video: 'src',
        source: 'src',
        img: 'src',
        image: 'xlink:href'
    }
};

webpack.base.conf.js

'use strict';
const path = require('path');
const utils = require('./utils');
const config = require('../config');
const vueLoaderConfig = require('./vue-loader.conf');

function resolve (dir) {
    return path.join(__dirname, '..', dir);
}

module.exports = {
    entry: {
        app: './src/main.js'
    },
    output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: (process.env.NODE_ENV === 'production')
            ? config.build.assetsPublicPath
            : config.dev.assetsPublicPath
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        modules: [
            resolve('src'),
            resolve('node_modules')
        ],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
        }
    },
    module: {
        rules: [
            {
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                enforce: 'pre',
                include: [resolve('src'), resolve('tests')],
                options: {
                    formatter: require('eslint-friendly-formatter')
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src'), resolve('tests')]
            },
            {
                test: /\.(json)(\?.*)?$/,
                loader: 'file-loader',
                include: [resolve('src/assets')],
                query: {
                    limit: 9999,
                    name: utils.assetsPath('data/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: [
                    {
                        loader: 'url-loader',
                        query: {
                            limit: 10000,
                            name: utils.assetsPath('images/[name].[hash:7].[ext]')
                        }
                    },
                    {
                        loader: 'img-loader',
                        options: {
                            enabled: process.env.NODE_ENV === 'production',
                            gifsicle: {
                                interlaced: false
                            },
                            mozjpeg: {
                                quality: 50,
                                progressive: true,
                                arithmetic: false,
                                smooth: 50
                            },
                            optipng: false, // disabled
                            pngquant: {
                                quality: '50',
                                floyd: 0.2,
                                speed: 2
                            },
                            svgo: {
                                plugins: [
                                    { removeTitle: true },
                                    { convertPathData: false }
                                ]
                            }
                        }
                    }
                ]
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('media/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                query: {
                    limit: 10000,
                    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                }
            }
        ]
    }
}

webpack.dev.conf.js

'use strict';

process.env.BABEL_ENV = 'main';

const utils = require('./utils');
const webpack = require('webpack');
const config = require('../config');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');

// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
    baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]);
});

module.exports = merge(baseWebpackConfig, {
    module: {
        rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
    },
    // cheap-module-eval-source-map is faster for development
    devtool: '#cheap-module-eval-source-map',
    plugins: [
        new webpack.DefinePlugin({
            'process.env': config.dev.env
        }),
        // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        // https://github.com/ampedandwired/html-webpack-plugin
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
        }),
        new FriendlyErrorsPlugin()
    ]
});