Initial commit

webpack/carto-node/webpack.config.js

@@ -0,0 +1,61 @@
+// NOTE: this configuration file MUST NOT be loaded with `-p` or `--optimize-minimize` option.
+// This option includes an implicit call to UglifyJsPlugin and LoaderOptionsPlugin. Instead,
+// an explicit call is made in this file to these plugins with customized options that enables
+// more control of the output bundle in order to fix unexpected behavior in old browsers.
+
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const path = require('path');
+const env = require('yargs').argv.env;
+
+const libraryName = 'CartoNode';
+const fileName = 'carto-node';
+
+const outputFile = env !== 'build'
+  ? fileName + '.js'
+  : fileName + '.min.js';
+
+const config = {
+  entry: './lib/assets/javascripts/carto-node/index',
+
+  output: {
+    path: path.resolve(__dirname, '../../vendor/assets/javascripts/carto-node'),
+    filename: outputFile,
+    library: libraryName,
+    libraryTarget: 'umd'
+  },
+
+  devtool: 'source-map',
+
+  module: {
+    rules: [{
+      test: /\.js$/,
+      loader: 'babel-loader',
+      include: [
+        path.resolve(__dirname, '../../lib/assets/javascripts/carto-node')
+      ],
+      options: {
+        presets: ['env'],
+        plugins: ['transform-object-assign']
+      }
+    }]
+  },
+
+  optimization: {
+    minimizer: [
+      new UglifyJsPlugin({
+        cache: false,
+        parallel: true,
+        uglifyOptions: {
+          sourceMap: true,
+          keep_fnames: true,
+          output: {
+            ascii_only: true,
+            beautify: false
+          }
+        }
+      })
+    ]
+  }
+};
+
+module.exports = config;

webpack/common/alias.js

@@ -0,0 +1,11 @@
+const { resolve } = require('path');
+
+module.exports = {
+  'fixtures': resolve(resolve('.'), 'lib/assets/test/spec/fixtures'),
+  'stylesheets': resolve(resolve('.'), 'assets/stylesheets'),
+  'backbone/core-view$': resolve(resolve('.'), 'lib/assets/javascripts/vendor/backbone/core-view.js'),
+  'backbone/core-model$': resolve(resolve('.'), 'lib/assets/javascripts/vendor/backbone/core-model.js'),
+  'jquery-ui$': resolve(resolve('.'), 'lib/assets/javascripts/vendor/jquery-ui.js'),
+  'backbone': resolve(resolve('.'), 'node_modules/backbone'), // Avoid two different `backbone` modules when linking `cartodb.js`  'fixtures/dashboard'
+  'vue$': 'vue/dist/vue.esm.js'
+};

webpack/common/modules.js

@@ -0,0 +1,6 @@
+const { resolve } = require('path');
+
+module.exports = [
+  'node_modules',
+  resolve(resolve('.'), 'lib/assets/javascripts')
+];

webpack/new-dashboard/utils.js

@@ -0,0 +1,92 @@
+'use strict';
+const path = require('path');
+const { name } = require('../../package.json');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+exports.cssLoaders = function (options) {
+  options = options || {};
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  };
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  };
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [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'
+      });
+    } 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'),
+    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;
+};
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier');
+
+  return (severity, errors) => {
+    if (severity !== 'error') return;
+
+    const error = errors[0];
+    const filename = error.file && error.file.split('!').pop();
+
+    notifier.notify({
+      title: name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    });
+  };
+};

webpack/new-dashboard/vue-loader.conf.js

@@ -0,0 +1,22 @@
+'use strict';
+
+const utils = require('./utils');
+const isProduction = process.env.NODE_ENV === 'production';
+const sourceMapEnabled = isProduction;
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  },
+  compilerOptions: {
+    whitespace: 'condense'
+  }
+};

webpack/static-pages/webpack.dev.config.js

@@ -0,0 +1,23 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
+const webpackFiles = require('../../lib/build/files/webpack_files');
+const Package = require('./../../package.json');
+
+const VERSION = Package.version;
+
+module.exports = {
+  entry: './lib/assets/javascripts/dashboard/statics/static.js',
+  output: {
+    filename: `${VERSION}/javascripts/[name].js`,
+    path: path.resolve(__dirname, '../../public/assets'),
+    publicPath: '/assets/'
+  },
+  devtool: 'source-map',
+  plugins: Object.keys(webpackFiles).map((entryName) => {
+    return new HtmlWebpackPlugin({
+      filename: path.resolve(__dirname, `../../public/static/${entryName}/index.html`),
+      template: path.resolve(__dirname, '../../lib/assets/javascripts/dashboard/statics/index.jst.ejs'),
+      config: webpackFiles[entryName]
+    });
+  })
+};

webpack/static-pages/webpack.prod.config.js

@@ -0,0 +1,25 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
+const webpackFiles = require('../../lib/build/files/webpack_files');
+const Package = require('./../../package.json');
+
+const VERSION = Package.version;
+
+module.exports = {
+  entry: './lib/assets/javascripts/dashboard/statics/static.js',
+  output: {
+    filename: `${VERSION}/javascripts/[name].js`,
+    path: path.resolve(__dirname, '../../public/assets'),
+    publicPath: '/assets/'
+  },
+  devtool: 'source-map',
+  plugins: Object.keys(webpackFiles).map((entryName) => {
+    return new HtmlWebpackPlugin({
+      inject: false,
+      cache: false,
+      filename: path.resolve(__dirname, `../../public/static/${entryName}/index.html`),
+      template: path.resolve(__dirname, '../../lib/assets/javascripts/dashboard/statics/index.jst.ejs'),
+      config: webpackFiles[entryName]
+    });
+  })
+};

webpack/v4/entryPoints.js

@@ -0,0 +1,188 @@
+const glob = require('glob');
+const { resolve } = require('path');
+
+const rootDir = file => resolve(__dirname, '../../', file);
+const removeDuplicated = array => Array.from(new Set(array));
+
+module.exports = {
+  common_new: removeDuplicated([
+    rootDir('assets/stylesheets/common/utilities.scss'),
+    rootDir('assets/stylesheets/common/icon-font-specials.scss'),
+    ...glob.sync(rootDir('assets/stylesheets/common/**/*.scss')),
+    rootDir('node_modules/cartoassets/src/scss/entry.scss')
+  ]),
+
+  deep_insights_new: [
+    rootDir('assets/stylesheets/deep-insights/entry.scss'),
+    rootDir('node_modules/internal-carto.js/themes/scss/entry.scss')
+  ],
+
+  public_map_new: glob.sync(rootDir('assets/stylesheets/public_map/**/*.scss')),
+
+  new_dashboard: [
+    '@babel/polyfill',
+    rootDir('lib/assets/javascripts/new-dashboard/main.js'),
+    rootDir('lib/assets/javascripts/new-dashboard/styles/main.scss'),
+    rootDir('node_modules/internal-carto.js/themes/scss/entry.scss')
+  ],
+
+  header: [
+    rootDir('lib/assets/javascripts/new-dashboard/bundles/header/header.js'),
+    rootDir('lib/assets/javascripts/new-dashboard/styles/bundles/header.scss')
+  ],
+
+  footer: [
+    rootDir('lib/assets/javascripts/new-dashboard/bundles/footer/footer.js'),
+    rootDir('lib/assets/javascripts/new-dashboard/styles/bundles/footer.scss')
+  ],
+
+  public_table_new: [
+    rootDir('lib/assets/javascripts/dashboard/public-dataset.js'),
+    rootDir('assets/stylesheets/table/table.scss'),
+    rootDir('assets/stylesheets/public/public_map_wrapper_new.scss'),
+    rootDir('assets/stylesheets/public/public_table_wrapper_new.scss'),
+    rootDir('assets/stylesheets/public/public_map_data.scss'),
+    rootDir('assets/stylesheets/public/public_map_body.scss'),
+    rootDir('assets/stylesheets/public/public_export.scss'),
+    ...glob.sync(rootDir('assets/stylesheets/public_table/**/*.scss')),
+    rootDir('assets/stylesheets/public/public_map_fullscreen.scss'),
+    rootDir('assets/stylesheets/map/map.scss'),
+    rootDir('node_modules/leaflet/dist/leaflet.css')
+  ],
+
+  public_dashboard_new: [
+    rootDir('lib/assets/javascripts/dashboard/public-dashboard.js'),
+    ...glob.sync(rootDir('assets/stylesheets/public_dashboard/**/*.scss')),
+    rootDir('assets/stylesheets/public_map/public_map_buttons.scss'),
+    rootDir('assets/stylesheets/public_map/public_map_footer.scss')
+  ],
+
+  user_feed_new: [
+    rootDir('lib/assets/javascripts/dashboard/user-feed.js'),
+    ...glob.sync(rootDir('assets/stylesheets/user_feed/**/*.scss'))
+  ],
+
+  api_keys_new: [
+    rootDir('lib/assets/javascripts/dashboard/api-keys.js'),
+    rootDir('assets/stylesheets/dashboard/api-keys.scss'),
+    rootDir('vendor/assets/stylesheets/tipsy.css'),
+    rootDir('node_modules/internal-carto.js/themes/scss/entry.scss')
+  ],
+
+  data_library: [
+    rootDir('lib/assets/javascripts/dashboard/data-library.js'),
+    ...glob.sync(rootDir('assets/stylesheets/data_library/**/*.scss')),
+    rootDir('assets/stylesheets/public_map/public_map_buttons.scss'),
+    rootDir('assets/stylesheets/public_map/public_map_footer.scss')
+  ],
+
+  mobile_apps: [
+    rootDir('lib/assets/javascripts/dashboard/mobile-apps.js'),
+    ...glob.sync(rootDir('assets/stylesheets/mobile_apps/*.scss'))
+  ],
+
+  account: rootDir('lib/assets/javascripts/dashboard/account.js'),
+
+  profile: rootDir('lib/assets/javascripts/dashboard/profile.js'),
+
+  sessions: [
+    rootDir('lib/assets/javascripts/dashboard/sessions.js'),
+    rootDir('assets/stylesheets/common/flash-message.scss'),
+    rootDir('assets/stylesheets/common/tooltip.scss'),
+    rootDir('assets/stylesheets/common/logo.scss'),
+    rootDir('node_modules/cartoassets/src/scss/entry.scss'),
+    ...glob.sync(rootDir('assets/stylesheets/sessions/*.scss'))
+  ],
+
+  confirmation: rootDir('lib/assets/javascripts/dashboard/confirmation.js'),
+
+  lockout: rootDir('lib/assets/javascripts/dashboard/lockout.js'),
+
+  new_lockout: [
+    '@babel/polyfill',
+    rootDir('lib/assets/javascripts/new-dashboard/bundles/lockout/lockout.js')
+  ],
+
+  maintenance: [
+    '@babel/polyfill',
+    rootDir('lib/assets/javascripts/new-dashboard/bundles/maintenance/maintenance.js')
+  ],
+
+  organization: [
+    rootDir('lib/assets/javascripts/dashboard/organization.js'),
+    rootDir('assets/stylesheets/plugins/tagit.scss'),
+    ...glob.sync(rootDir('assets/stylesheets/organization/*.scss')),
+    rootDir('assets/stylesheets/editor-3/_assets.scss'),
+    rootDir('assets/stylesheets/editor-3/_modals-layout.scss'),
+    rootDir('assets/stylesheets/editor-3/_tab-pane.scss'),
+    rootDir('assets/stylesheets/editor-3/_modals-elements.scss'),
+    rootDir('assets/stylesheets/editor-3/_scroll-view.scss')
+  ],
+
+  common_editor3: removeDuplicated([
+    rootDir('assets/stylesheets/common/buttons.scss'),
+    rootDir('assets/stylesheets/common/create/create_footer.scss'),
+    rootDir('assets/stylesheets/common/create/create_header.scss'),
+    rootDir('assets/stylesheets/common/error-details.scss'),
+    rootDir('assets/stylesheets/common/default.scss'),
+    rootDir('assets/stylesheets/common/dialog.scss'),
+    rootDir('assets/stylesheets/common/onboarding.scss'),
+    rootDir('assets/stylesheets/common/builder-onboarding.scss'),
+    rootDir('assets/stylesheets/common/layer-onboarding.scss'),
+    rootDir('assets/stylesheets/common/onboarding-notification.scss'),
+    rootDir('assets/stylesheets/common/default-paragraph.scss'),
+    rootDir('assets/stylesheets/common/default-description.scss'),
+    rootDir('assets/stylesheets/common/default-title.scss'),
+    rootDir('assets/stylesheets/common/default-time-diff.scss'),
+    rootDir('assets/stylesheets/common/privacy-indicator.scss'),
+    rootDir('assets/stylesheets/common/no-results.scss'),
+    rootDir('assets/stylesheets/common/filters.scss'),
+    rootDir('assets/stylesheets/common/intermediate-info.scss'),
+    rootDir('assets/stylesheets/common/nav-button.scss'),
+    rootDir('assets/stylesheets/common/spinner.scss'),
+    rootDir('assets/stylesheets/common/tabs.scss'),
+    rootDir('assets/stylesheets/common/titles.scss'),
+    rootDir('assets/stylesheets/common/utilities.scss'),
+    ...glob.sync(rootDir('assets/stylesheets/common/background-polling/**/*.scss')),
+    rootDir('assets/stylesheets/plugins/tipsy.scss'),
+    rootDir('assets/stylesheets/common/pagination.scss'),
+    rootDir('assets/stylesheets/common/datepicker.scss'),
+    rootDir('assets/stylesheets/common/datasets-list.scss'),
+    rootDir('assets/stylesheets/common/notifications-list.scss'),
+    ...glob.sync(rootDir('assets/stylesheets/common/create/**/*.scss')),
+    rootDir('assets/stylesheets/common/form-content.scss'),
+    ...glob.sync(rootDir('assets/stylesheets/common/forms/**/*.scss')),
+    rootDir('assets/stylesheets/common/option-card.scss'),
+    ...glob.sync(rootDir('assets/stylesheets/common/icons/**/*.scss')),
+    rootDir('assets/stylesheets/common/maps-list.scss'),
+    rootDir('assets/stylesheets/common/map-card.scss')
+  ]),
+
+  editor3: [
+    rootDir('node_modules/cartoassets/src/scss/entry.scss'),
+    rootDir('node_modules/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css'),
+    rootDir('assets/stylesheets/editor-3/entry.scss')
+  ],
+
+  builder_embed: [
+    'whatwg-fetch',
+    resolve(__dirname, '../../', 'lib/assets/javascripts/builder/public_editor.js'),
+    rootDir('assets/stylesheets/plugins/tipsy.scss'),
+    rootDir('assets/stylesheets/deep-insights/entry.scss'),
+    rootDir('node_modules/internal-carto.js/themes/scss/entry.scss'),
+    rootDir('node_modules/cartoassets/src/scss/entry.scss')
+  ],
+
+  password_protected: [
+    rootDir('assets/stylesheets/public/password_protected.scss'),
+    rootDir('node_modules/cartoassets/src/scss/entry.scss')
+  ],
+
+  dataset: resolve(__dirname, '../../', 'lib/assets/javascripts/builder/dataset.js'),
+
+  builder: resolve(__dirname, '../../', 'lib/assets/javascripts/builder/editor.js'),
+
+  oauth: [
+    rootDir('assets/stylesheets/oauth/oauth.scss')
+  ]
+};

webpack/v4/webpack.base.config.js

@@ -0,0 +1,284 @@
+const webpack = require('webpack');
+const { resolve } = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const WebpackDeleteAfterEmit = require('webpack-delete-after-emit');
+const { version } = require('../../package.json');
+const { http_path_prefix } = require(`../../config/grunt_${process.env.NODE_ENV}.json`);
+const entryPoints = require('./entryPoints');
+
+const vueLoaderConfig = require('../new-dashboard/vue-loader.conf');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+
+const rootDir = file => resolve(__dirname, '../../', file);
+const isVendor = name => name.indexOf('node_modules') >= 0;
+const isJavascript = name => name.endsWith('.js');
+
+module.exports = {
+  entry: entryPoints,
+  output: {
+    filename: `${version}/javascripts/[name].js`,
+    path: rootDir('public/assets')
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json', '.scss'],
+    symlinks: false,
+    modules: require('../common/modules.js'),
+    alias: require('../common/alias.js')
+  },
+  devtool: 'source-map',
+  plugins: [
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      'window.jQuery': 'jquery'
+    }),
+
+    new webpack.DefinePlugin({
+      __IN_DEV__: JSON.stringify(false),
+      __ENV__: JSON.stringify('prod'),
+      __ASSETS_VERSION__: JSON.stringify(version)
+    }),
+
+    new MiniCssExtractPlugin({
+      filename: `./${version}/stylesheets/[name].css`
+    }),
+
+    new CopyWebpackPlugin([
+      {
+        from: rootDir('app/assets/images'),
+        to: `./${version}/images/`,
+        toType: 'dir'
+      }, {
+        from: rootDir('public/favicons'),
+        to: `./${version}/favicons/`,
+        toType: 'dir'
+      }, {
+        from: rootDir('app/assets/images/avatars'),
+        to: `./unversioned/images/avatars/`,
+        toType: 'dir'
+      }, {
+        from: rootDir('app/assets/images/alphamarker.png'),
+        to: `./unversioned/images/alphamarker.png`,
+        toType: 'file'
+      }, {
+        from: rootDir('app/assets/images/carto.png'),
+        to: `./unversioned/images/carto.png`,
+        toType: 'file'
+      }, {
+        from: rootDir('app/assets/images/google-maps-basemap-icons'),
+        to: `./unversioned/images/google-maps-basemap-icon`,
+        toType: 'dir'
+      }, {
+        from: rootDir('lib/assets/javascripts/new-dashboard/assets/resources/onboarding'),
+        to: `./unversioned/onboarding/`,
+        toType: 'dir'
+      }
+    ]),
+
+    // CSS-only entry points which generate an useless
+    // javascript file so we remove it after emitting the files
+    new WebpackDeleteAfterEmit({
+      globs: [
+        `${version}/javascripts/common_new.js`,
+        `${version}/javascripts/common_new.js.map`,
+        `${version}/javascripts/deep_insights_new.js`,
+        `${version}/javascripts/deep_insights_new.js.map`,
+        `${version}/javascripts/public_map_new.js`,
+        `${version}/javascripts/public_map_new.js.map`,
+        `${version}/javascripts/common_editor3.js`,
+        `${version}/javascripts/common_editor3.js.map`,
+        `${version}/javascripts/editor3.js`,
+        `${version}/javascripts/editor3.js.map`
+      ]
+    }),
+
+    new VueLoaderPlugin()
+  ],
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        common: {
+          test: module => {
+            if (module.nameForCondition && isJavascript(module.nameForCondition())) {
+              return true;
+            }
+            for (const chunk of module.chunksIterable) {
+              if (chunk.name && isJavascript(chunk.name)) {
+                return true;
+              }
+            }
+            return false;
+          },
+          chunks: 'initial',
+          name: 'common',
+          minChunks: 2,
+          maxInitialRequests: 5,
+          minSize: 0
+        },
+        common_vendor: {
+          test: module => {
+            const name = module.nameForCondition && module.nameForCondition();
+            if (name && isVendor(name) && isJavascript(name)) {
+              return true;
+            }
+            for (const chunk of module.chunksIterable) {
+              if (chunk.name && isVendor(chunk.name) && isJavascript(chunk.name)) {
+                return true;
+              }
+            }
+            return false;
+          },
+          chunks: 'initial',
+          name: 'common_vendor',
+          priority: 10,
+          enforce: true
+        }
+      }
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'shim-loader',
+        include: [
+          rootDir('node_modules/internal-carto.js')
+        ],
+        options: {
+          shim: {
+            'wax.cartodb.js': {
+              exports: 'wax'
+            },
+            'html-css-sanitizer': {
+              exports: 'html'
+            },
+            'lzma': {
+              exports: 'LZMA'
+            }
+          }
+        }
+      },
+      {
+        test: /\.tpl$/,
+        use: [{
+          loader: 'tpl-loader',
+          options: {}
+        }],
+        include: [
+          rootDir('lib/assets/javascripts/builder'),
+          rootDir('lib/assets/javascripts/dashboard'),
+          rootDir('lib/assets/javascripts/deep-insights'),
+          rootDir('node_modules/internal-carto.js')
+        ]
+      },
+      {
+        test: /\.mustache$/,
+        use: 'raw-loader',
+        include: [
+          rootDir('lib/assets/javascripts/builder'),
+          rootDir('lib/assets/javascripts/deep-insights'),
+          rootDir('node_modules/internal-carto.js')
+        ]
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [
+          rootDir('lib/assets/javascripts/carto-node'),
+          rootDir('lib/assets/javascripts/builder'),
+          rootDir('lib/assets/javascripts/dashboard'),
+          rootDir('lib/assets/javascripts/new-dashboard'),
+          rootDir('node_modules/internal-carto.js')
+        ],
+        exclude: [
+          rootDir('node_modules/internal-carto.js/node_modules'),
+          rootDir('node_modules/internal-carto.js/vendor')
+        ],
+        options: {
+          presets: ['env'],
+          plugins: ['transform-object-rest-spread']
+        }
+      },
+      {
+        test: /\.s?css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              alias: {
+                // This is because of Carto.js _leaflet partial
+                '../../img': '../img'
+              },
+              sourceMap: false
+            }
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              data: `$assetsDir: "${http_path_prefix}/assets/${version}";`,
+              sourceMap: false,
+              includePaths: [
+                rootDir('node_modules/cartoassets/src/scss')
+              ]
+            }
+          }
+        ]
+      },
+      {
+        test: /\.(ttf|eot|woff|woff2)(.+#.+)?$/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: `[name].[ext]`,
+            outputPath: `${version}/fonts/`,
+            publicPath: `${http_path_prefix}/assets/${version}/fonts/`
+          }
+        }
+      },
+      {
+        test: /\.(png|gif|svg)$/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: `[name].[ext]`,
+            outputPath: `${version}/images/`,
+            publicPath: `${http_path_prefix}/assets/${version}/images/`
+          }
+        }
+      },
+
+      // New Dashboard Vue Configuration
+      {
+        test: /\.vue$/,
+        use: [
+
+          {
+            loader: 'vue-loader',
+            options: vueLoaderConfig
+          },
+          {
+            loader: 'vue-svg-inline-loader'
+          }
+        ]
+      },
+      {
+        test: /\.html$/,
+        use: 'raw-loader',
+        include: [
+          rootDir('lib/assets/javascripts/new-dashboard/assets/resources/onboarding'),
+          rootDir('lib/assets/javascripts/new-dashboard/components/Onboarding/wizard')
+        ]
+      }
+    ]
+  },
+
+  node: {
+    fs: 'empty' // This fixes the error Module not found: Error: Can't resolve 'fs'
+  },
+
+  stats: {
+    warnings: false
+  }
+};

webpack/v4/webpack.dev.config.js

@@ -0,0 +1,16 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const configBase = require('./webpack.base.config.js');
+
+module.exports = merge(configBase, {
+  mode: 'development',
+  plugins: [
+    new webpack.ProvidePlugin({
+      videojs: 'video.js',
+    }),
+    new webpack.DefinePlugin({
+      __IN_DEV__: JSON.stringify(true),
+      __ENV__: JSON.stringify('dev')
+    })
+  ]
+});

webpack/v4/webpack.prod.config.js

@@ -0,0 +1,46 @@
+// NOTE: this configuration file MUST NOT be loaded with `-p` or `--optimize-minimize` option.
+// This option includes an implicit call to UglifyJsPlugin and LoaderOptionsPlugin. Instead,
+// an explicit call is made in this file to these plugins with customized options that enables
+// more control of the output bundle in order to fix unexpected behavior in old browsers.
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const baseConfig = require('./webpack.base.config.js');
+
+module.exports = merge(baseConfig, {
+  mode: 'production',
+  plugins: [
+    new webpack.DefinePlugin({
+      __IN_DEV__: JSON.stringify(false),
+      __ENV__: JSON.stringify('prod')
+    })
+  ],
+  optimization: {
+    minimizer: [
+      new UglifyJsPlugin({
+        cache: false,
+        parallel: true,
+        sourceMap: true,
+        uglifyOptions: {
+          keep_fnames: true,
+          output: {
+            ascii_only: true,
+            beautify: false
+          }
+        }
+      }),
+      new OptimizeCSSAssetsPlugin({
+        cssProcessorOptions: {
+          zindex: false,
+          reduceIdents: false,
+          autoprefixer: {
+            remove: false,
+            add: true,
+            browsers: ['> 1%']
+          }
+        }
+      })
+    ]
+  }
+});