Bump dev dependencies (webpack 4, babel 7, etc), replace build files by webpack config, use webpack-dev-server

build/build.js

@@ -1,35 +0,0 @@
-// https://github.com/shelljs/shelljs
-require('shelljs/global');
-env.NODE_ENV = 'production';
-
-var path = require('path');
-var config = require('../config');
-var ora = require('ora');
-var webpack = require('webpack');
-var utils = require('./utils');
-var webpackConfig = utils.shouldBuildHomepage() ? require('./webpack.site.conf') : require('./webpack.prod.conf');
-
-var text = utils.shouldBuildHomepage() ? 'homepage' : 'vue-select UMD module';
-var spinner = ora(`building ${text}...`);
-spinner.start();
-
-var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory);
-if (!utils.shouldBuildHomepage()) {
-  rm('-rf', assetsPath);
-  mkdir('-p', assetsPath);
-}
-
-/**
- * Build the /dist/ folder
- */
-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')
-});

build/dev-client.js

@@ -1,9 +0,0 @@
-/* eslint-disable */
-require('eventsource-polyfill')
-var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
-
-hotClient.subscribe(function (event) {
-  if (event.action === 'reload') {
-    window.location.reload()
-  }
-})

build/dev-server.js

@@ -1,65 +0,0 @@
-var path = require('path')
-var express = require('express')
-var webpack = require('webpack')
-var config = require('../config')
-var proxyMiddleware = require('http-proxy-middleware')
-var webpackConfig = process.env.NODE_ENV === 'testing'
-  ? require('./webpack.prod.conf')
-  : require('./webpack.dev.conf')
-
-// default port where dev server listens for incoming traffic
-var port = process.env.PORT || config.dev.port
-// Define HTTP proxies to your custom API backend
-// https://github.com/chimurai/http-proxy-middleware
-var proxyTable = config.dev.proxyTable
-
-var app = express()
-var compiler = webpack(webpackConfig)
-
-var devMiddleware = require('webpack-dev-middleware')(compiler, {
-  publicPath: webpackConfig.output.publicPath,
-  stats: {
-    colors: true,
-    chunks: false
-  }
-})
-
-var hotMiddleware = require('webpack-hot-middleware')(compiler)
-// force page reload when html-webpack-plugin template changes
-compiler.plugin('compilation', function (compilation) {
-  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
-    hotMiddleware.publish({ action: 'reload' })
-    cb()
-  })
-})
-
-// proxy api requests
-Object.keys(proxyTable).forEach(function (context) {
-  var options = proxyTable[context]
-  if (typeof options === 'string') {
-    options = { target: options }
-  }
-  app.use(proxyMiddleware(context, options))
-})
-
-// handle fallback for HTML5 history API
-app.use(require('connect-history-api-fallback')())
-
-// serve webpack bundle output
-app.use(devMiddleware)
-
-// enable hot-reload and state-preserving
-// compilation error display
-app.use(hotMiddleware)
-
-// serve pure static assets
-var staticPath = path.posix.join(config.build.assetsPublicPath, config.build.assetsSubDirectory)
-app.use(staticPath, express.static('./static'))
-
-module.exports = app.listen(port, function (err) {
-  if (err) {
-    console.log(err)
-    return
-  }
-  console.log('Listening at http://localhost:' + port + '\n')
-})

build/utils.js

@@ -1,83 +0,0 @@
-var path = require('path')
-var config = require('../config')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
-
-/**
- * Get the path to the assetsSubDirectory
- * @param _path
- * @returns {*|string}
- */
-exports.assetsPath = function (_path) {
-  return path.posix.join(config.build.assetsSubDirectory, _path)
-}
-
-/**
- * Generate loader string to be used with extract text plugin
- * @param options
- * @returns {{css: *, postcss: *, less: *, sass: *, scss: *, stylus: *, styl: *}}
- */
-exports.cssLoaders = function (options) {
-  options = options || {}
-
-  function generateLoaders (loaders) {
-    var sourceLoader = loaders.map(function (loader) {
-      var extraParamChar
-      if (/\?/.test(loader)) {
-        loader = loader.replace(/\?/, '-loader?')
-        extraParamChar = '&'
-      } else {
-        loader = loader + '-loader'
-        extraParamChar = '?'
-      }
-      return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
-    }).join('!')
-
-    if (options.extract) {
-      return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
-    } else {
-      return ['vue-style-loader', sourceLoader].join('!')
-    }
-  }
-
-  // http://vuejs.github.io/vue-loader/configurations/extract-css.html
-  return {
-    css: generateLoaders(['css']),
-    postcss: generateLoaders(['css']),
-    less: generateLoaders(['css', 'less']),
-    sass: generateLoaders(['css', 'sass?indentedSyntax']),
-    scss: generateLoaders(['css', 'sass']),
-    stylus: generateLoaders(['css', 'stylus']),
-    styl: generateLoaders(['css', 'stylus'])
-  }
-}
-
-/**
- * Generate loaders for standalone style files (outside of .vue)
- * @param options
- * @returns {Array}
- */
-exports.styleLoaders = function (options) {
-  var output = []
-  var loaders = exports.cssLoaders(options)
-  for (var extension in loaders) {
-    var loader = loaders[extension]
-    output.push({
-      test: new RegExp('\\.' + extension + '$'),
-      loader: loader
-    })
-  }
-  return output
-}
-
-/**
- * Are we serving the docs or
- * the dev environment?
- * @returns {boolean}
- */
-exports.shouldServeHomepage = function () {
-  return process.argv.indexOf('--docs') > 0
-}
-
-exports.shouldBuildHomepage = function () {
-  return process.argv.indexOf('--homepage') > 0
-}

build/webpack.base.conf.js

@@ -1,34 +1,32 @@
+var webpack = require('webpack')
+var VueLoaderPlugin = require('vue-loader').VueLoaderPlugin;
+var MiniCssExtractPlugin = require('mini-css-extract-plugin')
 var path = require('path')
-var config = require('../config')
-var utils = require('./utils')
-var projectRoot = path.resolve(__dirname, '../')
+var chokidar = require('chokidar');
+
+const env = process.env.NODE_ENV === 'production' ? 'production' : 'development';
 
 module.exports = {
-  entry: {
-    app: utils.shouldServeHomepage() ? './docs/homepage/home.js' : './dev/dev.js',
-  },
+  mode: env,
   output: {
-    path: config.build.assetsRoot,
-    publicPath: config.build.assetsPublicPath,
+    path: path.resolve(__dirname, '../dist'),
+    publicPath: '/',
     filename: '[name].js'
   },
+  devtool: env === 'production' ? 'source-map' : 'eval-source-map',
   resolve: {
-    extensions: ['', '.js', '.vue'],
-    fallback: [path.join(__dirname, '../node_modules')],
+    extensions: ['.js', '.vue'],
     alias: {
       'src': path.resolve(__dirname, '../src'),
       'assets': path.resolve(__dirname, '../docs/assets'),
       'mixins': path.resolve(__dirname, '../src/mixins'),
       'components': path.resolve(__dirname, '../src/components'),
       'docs': path.resolve(__dirname, '../docs'),
-      'vue$': 'vue/dist/vue.common.js',
+      'vue$': 'vue/dist/vue.esm.js'
     }
   },
-  resolveLoader: {
-    fallback: [path.join(__dirname, '../node_modules')]
-  },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.vue$/,
         loader: 'vue-loader'
@@ -36,13 +34,23 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        include: projectRoot,
+        include: path.resolve(__dirname, '../'),
         exclude: /node_modules/
       },
       {
         test: /\.json$/,
         loader: 'json-loader'
       },
+      {
+        test: /\.s?css$/,
+        use: [
+          process.env.NODE_ENV !== 'production'
+            ? 'vue-style-loader'
+            : MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader'
+        ]
+      },
       {
         test: /\.html$/,
         loader: 'vue-html-loader'
@@ -52,7 +60,7 @@ module.exports = {
         loader: 'url',
         query: {
           limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+          name: 'img/[name].[hash:7].[ext]'
         }
       },
       {
@@ -60,12 +68,31 @@ module.exports = {
         loader: 'url',
         query: {
           limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+          name: 'fonts/[name].[hash:7].[ext]'
         }
       }
     ]
   },
-  vue: {
-    loaders: utils.cssLoaders()
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new MiniCssExtractPlugin({
+      filename: 'vue-select.css'
+    }),
+    new VueLoaderPlugin()
+  ],
+  devServer: {
+    hot: true,
+    hotOnly: true,
+    inline: true,
+    port: 8080,
+    before(app, server) {
+      chokidar.watch([
+        './**/*.html'
+      ]).on('all', function () {
+        server.sockWrite(server.sockets, 'content-changed');
+      })
+    }
   }
 }

build/webpack.dev.conf.js

@@ -1,39 +1,24 @@
-var config = require('../config')
-var webpack = require('webpack')
 var merge = require('webpack-merge')
-var utils = require('./utils')
-var baseWebpackConfig = require('./webpack.base.conf')
 var HtmlWebpackPlugin = require('html-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])
-})
+var baseWebpackConfig = require('./webpack.base.conf')
 
 module.exports = merge(baseWebpackConfig, {
+  entry: './dev/dev.js',
   module: {
-    loaders: utils.styleLoaders().concat({ test: /\.md$/, loader: "html!markdown" })
+    rules: [{
+      test: /\.md$/,
+      loader: "html!markdown-code-highlight-loader"
+    }]
   },
-  // eval-source-map is faster for development
-  devtool: '#eval-source-map',
   plugins: [
-    new webpack.DefinePlugin({
-      'process.env': config.dev.env
-    }),
-    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
-    new webpack.optimize.OccurenceOrderPlugin(),
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
-    // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: 'index.html',
-      template: utils.shouldServeHomepage() ? './docs/homepage/home.html' : './dev/dev.html',
+      template: './dev/dev.html',
       inject: true
     })
   ],
-  markdownLoader: {
-    highlight: function (code) {
-      return require('highlight.js').highlightAuto(code).value;
-    }
+  optimization: {
+    noEmitOnErrors: true
   }
 })

build/webpack.prod.conf.js

@@ -1,32 +1,13 @@
-const webpack = require('webpack')
-const base = require('./webpack.base.conf')
-const config = require('../config')
+var merge = require('webpack-merge')
 
-base.entry = {
-  lib: './src/index.js'
-}
+var baseWebpackConfig = require('./webpack.base.conf')
 
-base.output = {
-  path: config.build.assetsRoot,
-  publicPath: config.build.assetsPublicPath,
-  filename: 'vue-select.js',
-  library: 'VueSelect',
-  libraryTarget: 'umd'
-}
-
-var webpackConfig = Object.assign({}, base)
-
-webpackConfig.devtool = '#source-map'
-webpackConfig.plugins = (webpackConfig.plugins || []).concat([
-  new webpack.DefinePlugin({
-    'process.env': {
-      NODE_ENV: '"production"'
-    }
-  }),
-  new webpack.optimize.UglifyJsPlugin({
-    compress: { warnings: false }
-  }),
-  new webpack.optimize.OccurenceOrderPlugin(),
-])
-
-module.exports = webpackConfig
+module.exports = merge(baseWebpackConfig, {
+  entry: './src/index.js',
+  output: {
+    filename: 'vue-select.js',
+    library: 'VueSelect',
+    libraryTarget: 'umd',
+    globalObject: "typeof self !== 'undefined' ? self : this"
+  }
+});

build/webpack.site.conf.js

@@ -1,51 +1,15 @@
-var path = require('path')
-var config = require('../config')
-var utils = require('./utils')
-var webpack = require('webpack')
 var merge = require('webpack-merge')
-var baseWebpackConfig = require('./webpack.base.conf')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
-var env = process.env.NODE_ENV === 'testing'
-    ? require('../config/test.env')
-    : config.homepage.env
+
+var baseWebpackConfig = require('./webpack.base.conf')
 
 module.exports = merge(baseWebpackConfig, {
-  entry: {
-    app: config.homepage.entry
-  },
-  module: {
-    loaders: utils.styleLoaders({ sourceMap: config.homepage.productionSourceMap, extract: true })
-  },
-  devtool: config.homepage.productionSourceMap ? '#source-map' : false,
+  entry: './docs/homepage/home.js',
   output: {
-    publicPath: config.homepage.assetsPublicPath,
-    path: config.homepage.assetsRoot,
-    filename: utils.assetsPath('js/[name].[chunkhash].js'),
-    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
-  },
-  vue: {
-    loaders: utils.cssLoaders({
-      sourceMap: config.homepage.productionSourceMap,
-      extract: true
-    })
+    filename: 'js/[name].[hash].js',
+    chunkFilename: 'js/[id].[hash].js'
   },
   plugins: [
-    // http://vuejs.github.io/vue-loader/workflow/production.html
-    new webpack.DefinePlugin({
-      'process.env': env
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    }),
-    new webpack.optimize.OccurenceOrderPlugin(),
-    // extract css into its own file
-    new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
-    // generate dist index.html with correct asset hash for caching.
-    // you can customize output by editing /index.html
-    // see https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: './docs/homepage/home.html',
@@ -54,30 +18,34 @@ module.exports = merge(baseWebpackConfig, {
         removeComments: true,
         collapseWhitespace: true,
         removeAttributeQuotes: true
-        // more options:
-        // https://github.com/kangax/html-minifier#options-quick-reference
       },
-      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
       chunksSortMode: 'dependency'
     }),
-    // split vendor js into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: function (module, count) {
-        // any required modules inside node_modules are extracted to vendor
-        return (
-            module.resource &&
-            module.resource.indexOf(
-                path.join(__dirname, '../node_modules')
-            ) === 0
-        )
+  ],
+  optimization: {
+    splitChunks: {
+      chunks: 'async',
+      minSize: 30000,
+      maxSize: 0,
+      minChunks: 1,
+      maxAsyncRequests: 5,
+      maxInitialRequests: 3,
+      automaticNameDelimiter: '~',
+      name: true,
+      cacheGroups: {
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          priority: -10
+        },
+        default: {
+          minChunks: 2,
+          priority: -20,
+          reuseExistingChunk: true
+        }
       }
-    }),
-    // extract webpack runtime and module manifest to its own file in order to
-    // prevent vendor hash from being updated whenever app bundle is updated
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-      chunks: ['vendor']
-    })
-  ]
+    },
+    runtimeChunk: {
+      name: "manifest",
+    }
+  }
 })