From 956390b3088e843c6ea06cffa49b2446263abd3f Mon Sep 17 00:00:00 2001 From: James Curtin Date: Wed, 5 Jun 2019 19:07:51 -0400 Subject: [PATCH] Upgrade JS modules A number of modules were a few major versions out of date or were deprecated. Bumping versions and swapping out a few dependencies that do not seem to be maintained. --- {{cookiecutter.app_name}}/assets/js/main.js | 2 +- {{cookiecutter.app_name}}/package.json | 39 +++++++++++---------- {{cookiecutter.app_name}}/webpack.config.js | 32 ++++++++++++++--- 3 files changed, 48 insertions(+), 25 deletions(-) diff --git a/{{cookiecutter.app_name}}/assets/js/main.js b/{{cookiecutter.app_name}}/assets/js/main.js index ed90e69..cb0cc84 100644 --- a/{{cookiecutter.app_name}}/assets/js/main.js +++ b/{{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'); diff --git a/{{cookiecutter.app_name}}/package.json b/{{cookiecutter.app_name}}/package.json index 2241633..68dfb35 100644 --- a/{{cookiecutter.app_name}}/package.json +++ b/{{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", - "popper.js": "^1.14.3" + "jquery": "^3.4.1", + "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-preset-env": "^1.6.0", - "concurrently": "^4.0.1", - "css-loader": "^1.0.0", - "eslint": "^5.3.0", + "babel-loader": "^8.0.6", + "babel-preset-env": "^1.7.0", + "concurrently": "^4.1.0", + "css-loader": "^2.1.1", "eslint-config-airbnb-base": "^13.1.0", - "eslint-plugin-import": "^2.3.0", - "extract-text-webpack-plugin": "^2.1.2", - "file-loader": "^2.0.0", - "font-awesome-webpack": "0.0.5-beta.2", - "less": "^3.8.0", + "eslint-plugin-import": "^2.17.3", + "eslint": "^5.16.0", + "file-loader": "^4.0.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", - "url-loader": "^1.0.1", - "webpack": "^2.6.1", - "webpack-dev-server": "^2.11.1", - "sync-exec": "^0.6.2" + "style-loader": "^0.23.1", + "sync-exec": "^0.6.2", + "url-loader": "^1.1.2", + "webpack-cli": "^3.3.2", + "webpack-dev-server": "^3.5.1", + "webpack": "^4.33.0" } } diff --git a/{{cookiecutter.app_name}}/webpack.config.js b/{{cookiecutter.app_name}}/webpack.config.js index a2bff4e..18698f1 100644 --- a/{{cookiecutter.app_name}}/webpack.config.js +++ b/{{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,