Merge pull request #495 from cookiecutter-flask/update-js-deps

Upgrade JS modules

{{cookiecutter.app_name}}/assets/js/main.js

@@ -5,8 +5,8 @@
  */
 
 // JavaScript modules
+require('@fortawesome/fontawesome-free');
 require('jquery');
-require('font-awesome-webpack');
 require('popper.js');
 require('bootstrap');
 

{{cookiecutter.app_name}}/package.json

@@ -21,32 +21,33 @@
   },
   "homepage": "https://github.com/{{cookiecutter.github_username}}/{{cookiecutter.app_name}}#readme",
   "dependencies": {
-    "bootstrap": "^4.1.3",
+    "@fortawesome/fontawesome-free": "^5.9.0",
+    "bootstrap": "^4.3.1",
     "font-awesome": "^4.7.0",
-    "jquery": "^3.2.1",
+    "jquery": "^3.4.1",
-    "popper.js": "^1.14.3"
+    "popper.js": "^1.15.0"
   },
   "devDependencies": {
-    "babel-core": "^6.25.0",
+    "@babel/core": "^7.4.5",
     "babel-eslint": "^10.0.1",
-    "babel-loader": "^7.0.0",
+    "babel-loader": "^8.0.6",
-    "babel-preset-env": "^1.6.0",
+    "babel-preset-env": "^1.7.0",
-    "concurrently": "^4.0.1",
+    "concurrently": "^4.1.0",
-    "css-loader": "^1.0.0",
+    "css-loader": "^2.1.1",
-    "eslint": "^5.3.0",
     "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-plugin-import": "^2.3.0",
+    "eslint-plugin-import": "^2.17.3",
-    "extract-text-webpack-plugin": "^2.1.2",
+    "eslint": "^5.16.0",
-    "file-loader": "^2.0.0",
+    "file-loader": "^4.0.0",
-    "font-awesome-webpack": "0.0.5-beta.2",
-    "less": "^3.8.0",
     "less-loader": "^5.0.0",
     "manifest-revision-webpack-plugin": "^0.4.0",
+    "less": "^3.9.0",
+    "mini-css-extract-plugin": "^0.7.0",
     "raw-loader": "^3.0.0",
-    "style-loader": "^0.23.0",
+    "style-loader": "^0.23.1",
-    "url-loader": "^1.0.1",
+    "sync-exec": "^0.6.2",
-    "webpack": "^2.6.1",
+    "url-loader": "^1.1.2",
-    "webpack-dev-server": "^2.11.1",
+    "webpack-cli": "^3.3.2",
-    "sync-exec": "^0.6.2"
+    "webpack-dev-server": "^3.5.1",
+    "webpack": "^4.33.0"
   }
 }

{{cookiecutter.app_name}}/webpack.config.js

@@ -4,8 +4,8 @@ const webpack = require('webpack');
 /*
  * Webpack Plugins
  */
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ManifestRevisionPlugin = require('manifest-revision-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 // take debug mode from the environment
 const debug = (process.env.NODE_ENV !== 'production');
@@ -40,10 +40,32 @@ module.exports = {
     headers: { 'Access-Control-Allow-Origin': '*' },
   },
   module: {
-    loaders: [
+    rules: [
+      {
+        test: /\.less$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              hmr: debug,
+            },
+          },
+          'css-loader!less-loader',
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              hmr: debug,
+            },
+          },
+          'css-loader',
+        ],
+      },
       { test: /\.html$/, loader: 'raw-loader' },
-      { test: /\.less$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!less-loader' }) },
-      { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) },
       { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
       { test: /\.(ttf|eot|svg|png|jpe?g|gif|ico)(\?.*)?$/i,
         loader: `file-loader?context=${rootAssetPath}&name=[path][name].[hash].[ext]` },
@@ -51,7 +73,7 @@ module.exports = {
     ],
   },
   plugins: [
-    new ExtractTextPlugin('[name].[hash].css'),
+    new MiniCssExtractPlugin({ filename: '[name].[hash].css', }),
     new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }),
     new ManifestRevisionPlugin(path.join(__dirname, '{{cookiecutter.app_name}}', 'webpack', 'manifest.json'), {
       rootAssetPath,