Upgrade to webpack 5

ankurk91 · Jan 11, 2021 · a882357 · a882357
1 parent 7a2b981
commit a882357
Show file tree

Hide file tree

Showing 6 changed files with 2,086 additions and 2,908 deletions.
diff --git a/README.md b/README.md
@@ -159,7 +159,7 @@ The component accepts these props:
 | Attribute        | Type                                            | Default              | Description      |
 | :---             | :---:                                           | :---:                | :---             |
 | v-model          | String / Date Object / Array / Timestamp / null | `null`               | Set or Get date-picker value (required) |
-| config           | Object                                          | `{ wrap:false }`       | Flatpickr configuration [options](https://flatpickr.js.org/options/)|
+| config           | Object                                          | `{ wrap:false }`     | Flatpickr configuration [options](https://flatpickr.js.org/options/)|
 | events           | Array                                           | Array of sensible [events](./src/events.js#L2)  | Customise the [events](https://flatpickr.js.org/events/) to be emitted|
 
 ## Install in non-module environments (without webpack)

diff --git a/examples/App.vue b/examples/App.vue
@@ -193,7 +193,7 @@ import 'flatpickr/dist/flatpickr.min.css';
 import {Hindi as HindiLocale} from 'flatpickr/dist/l10n/hi.js';
 import {english as EnglishLocale} from 'flatpickr/dist/l10n/default.js'
 // Plugins are optional
-// https://chmln.github.io/flatpickr/plugins/
+// https://flatpickr.js.org/plugins/
 import ConfirmDatePlugin from 'flatpickr/dist/plugins/confirmDate/confirmDate.js';
 import 'flatpickr/dist/plugins/confirmDate/confirmDate.css';
 import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect/index.js'
@@ -245,17 +245,17 @@ export default {
           dateFormat: 'd-m-Y H:i'
         },
         locale: {
-          // https://chmln.github.io/flatpickr/localization/
+          // https://flatpickr.js.org/localization//
           locale: HindiLocale,
-          // https://chmln.github.io/flatpickr/events/
+          // https://flatpickr.js.org/events/
           onChange: this.onChange
         },
         inline: {
           inline: true
         },
         confirmPlugin: {
           enableTime: true,
-          // https://chmln.github.io/flatpickr/plugins/
+          // https://flatpickr.js.org/plugins/
           plugins: [new ConfirmDatePlugin()]
         },
         allowInput: {
@@ -290,8 +290,6 @@ export default {
     },
     updateConfig() {
       console.log('Update config');
-      // Right way to modify config runtime
-      // https://vuejs.org/v2/api/#Vue-set
       this.configs.basic.mode = 'range';
     },
     changeLocale() {

diff --git a/package.json b/package.json
@@ -29,37 +29,36 @@
     "test": "jest",
     "test:watch": "yarn run test --watch --notify",
     "start": "yarn run dev",
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --progress --hot --config=webpack.config.dev.js",
-    "docs": "cross-env NODE_ENV=production webpack --config=webpack.config.dev.js --progress --mode production",
-    "build": "cross-env NODE_ENV=production webpack --progress --mode production",
+    "dev": "cross-env NODE_ENV=development webpack serve --progress --hot --config=webpack.config.dev.js",
+    "docs": "cross-env NODE_ENV=production webpack --config=webpack.config.dev.js --progress --mode=production",
+    "build": "cross-env NODE_ENV=production webpack --progress --mode=production",
     "prepublishOnly": "yarn run test && yarn run build"
   },
   "dependencies": {
     "flatpickr": "^4.6.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.4",
-    "@babel/preset-env": "^7.11.0",
-    "@vue/compiler-sfc": "^3.0.4",
-    "@vue/test-utils": "^2.0.0-beta.13",
-    "babel-jest": "^26.3.0",
-    "babel-loader": "^8.1.0",
-    "bootstrap": "^4.5.2",
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "@vue/compiler-sfc": "^3.0.5",
+    "@vue/test-utils": "^2.0.0-beta.14",
+    "babel-jest": "^26.6.3",
+    "babel-loader": "^8.2.2",
+    "bootstrap": "^4.5.3",
     "clean-webpack-plugin": "^3.0.0",
-    "cross-env": "^7.0.2",
-    "css-loader": "^4.2.2",
-    "file-loader": "^6.0.0",
-    "html-webpack-plugin": "^4.3.0",
-    "jest": "^26.4.2",
-    "mini-css-extract-plugin": "^0.11.0",
-    "style-loader": "^1.2.1",
-    "unminified-webpack-plugin": "^2.0.0",
-    "vue": "^3.0.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.0.1",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^4.5.1",
+    "jest": "^26.6.3",
+    "mini-css-extract-plugin": "^1.3.3",
+    "style-loader": "^2.0.0",
+    "vue": "^3.0",
     "vue-jest": "^5.0.0-alpha.7",
     "vue-loader": "^16.0.0",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0"
+    "webpack": "^5.12.3",
+    "webpack-cli": "^4.3.1",
+    "webpack-dev-server": "^4.0.0-beta.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

diff --git a/webpack.config.dev.js b/webpack.config.dev.js
@@ -18,15 +18,15 @@ module.exports = {
       path.resolve(__dirname, 'node_modules'),
     ],
     alias: {
-      vue: "@vue/runtime-dom"
+      vue: '@vue/runtime-dom'
     },
     extensions: ['.js', '.json', '.vue'],
   },
   entry: './examples/index.js',
   output: {
     path: path.resolve(__dirname, 'docs'),
     publicPath: '',
-    filename: "js/[name].[hash].js"
+    filename: "js/[name].[chunkhash].js"
   },
   module: {
     rules: [
@@ -50,7 +50,7 @@ module.exports = {
           {
             loader: "css-loader",
             options: {
-              sourceMap: !isProduction,
+              //
             }
           },
         ],
@@ -59,26 +59,30 @@ module.exports = {
         test: /\.jpe?g$|\.gif$|\.png$/i,
         loader: 'file-loader',
         options: {
-          name: '[path][name]-[hash].[ext]',
+          name: '[path][name]-[contenthash].[ext]',
         }
       },
       {
         test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
         loader: 'file-loader',
         options: {
-          name: '[path][name]-[hash].[ext]',
+          name: '[path][name]-[contenthash].[ext]',
         }
       }
 
     ]
   },
   // https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
   optimization: {
-    runtimeChunk: false,
+    moduleIds: 'deterministic',
+    runtimeChunk: {
+      name: 'manifest'
+    },
     splitChunks: {
+      automaticNameDelimiter: '-',
       cacheGroups: {
         commons: {
-          test: /[\\/]node_modules[\\/]/,
+          test: /[\\/]node_modules[\\/].*\.js$/,
           name: 'vendor',
           chunks: 'all',
           enforce: true
@@ -104,18 +108,18 @@ module.exports = {
     new VueLoaderPlugin(),
   ],
   devServer: {
-    contentBase: path.resolve(__dirname, 'docs'),
+    firewall: false,
     host: 'localhost',
     port: 9000,
     open: true,
-    hot: true,
+    liveReload: false,
     overlay: {
       warnings: false,
       errors: true
     },
-    stats: 'errors-only',
+    static: path.resolve(process.cwd(), 'docs'),
   },
-  devtool: isProduction ? false : '#cheap-module-eval-source-map',
+  devtool: isProduction ? false : 'eval-cheap-source-map',
   performance: {
     hints: false,
   },
@@ -130,15 +134,15 @@ if (isProduction) {
   module.exports.plugins.push(
     new CleanWebpackPlugin(),
     new MiniCssExtractPlugin({
-      filename: 'css/[name]-[hash].css',
+      filename: 'css/[name]-[chunkhash].css',
     }),
   );
   module.exports.optimization.minimizer.push(
     new TerserPlugin({
-      sourceMap: false,
+      extractComments: false,
       terserOptions: {
         output: {
-          beautify: false,
+          comments: false,
         },
         compress: {
           drop_debugger: true,

diff --git a/webpack.config.js b/webpack.config.js
@@ -3,7 +3,6 @@
 const webpack = require('webpack');
 const path = require('path');
 const {CleanWebpackPlugin} = require('clean-webpack-plugin');
-const UnminifiedWebpackPlugin = require('unminified-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const {VueLoaderPlugin} = require('vue-loader');
 
@@ -14,11 +13,14 @@ module.exports = {
       path.resolve(__dirname, 'node_modules'),
     ],
     alias: {
-      vue: "@vue/runtime-dom"
+      vue: '@vue/runtime-dom'
     },
     extensions: ['.js', '.json', '.vue']
   },
-  entry: './src/index.js',
+  entry: {
+    'vue-flatpickr': './src/index.js',
+    'vue-flatpickr.min': './src/index.js',
+  },
   externals: {
     'vue': {
       commonjs: 'vue',
@@ -30,14 +32,11 @@ module.exports = {
   },
   output: {
     path: path.resolve(__dirname, 'dist'),
-    filename: 'vue-flatpickr.min.js',
+    filename: '[name].js',
     library: 'VueFlatpickr',
     libraryTarget: 'umd',
     libraryExport: 'default',
     umdNamedDefine: true,
-    // Workaround to fix umd build, restore webpack v3 behaviour
-    // https://github.com/webpack/webpack/issues/6642
-    globalObject: "typeof self !== 'undefined' ? self : this"
   },
   module: {
     rules: [
@@ -54,24 +53,24 @@ module.exports = {
     ]
   },
   optimization: {
+    minimize: true,
     minimizer: [
       new TerserPlugin({
-        sourceMap: false,
+        include: /\.min\.js$/,
+        extractComments: false,
         terserOptions: {
           output: {
-            beautify: false,
+            comments: false,
           },
           compress: {
-            drop_debugger: true,
-            drop_console: true
+            drop_console: true,
           }
         }
       }),
     ]
   },
   plugins: [
     new CleanWebpackPlugin(),
-    new UnminifiedWebpackPlugin(),
     new VueLoaderPlugin(),
   ],
   devtool: false,