From c798aca98bca1e4c9901802efe845a04661949ff Mon Sep 17 00:00:00 2001 From: marudor Date: Tue, 27 Nov 2018 21:45:04 +0100 Subject: [PATCH] modernize Stuff --- .babelrc | 6 +++--- package.json | 22 ++++++++++++---------- webpack.config.js | 27 ++++++++++++++++++++------- 3 files changed, 35 insertions(+), 20 deletions(-) diff --git a/.babelrc b/.babelrc index 84b2eaa5..2359bbe0 100644 --- a/.babelrc +++ b/.babelrc @@ -1,5 +1,5 @@ { - "presets": [["env", { + "presets": [["@babel/preset-env", { "targets": { "chrome": 45, "firefox": 42, @@ -8,8 +8,8 @@ "edge": 12, "iOS": 9 }, - "loose": true, - "useBuiltIns": true + "loose": false, + "useBuiltIns": "entry" }] ], "plugins": [ diff --git a/package.json b/package.json index 3c6dbca1..f1eb308b 100644 --- a/package.json +++ b/package.json @@ -13,9 +13,9 @@ "build:watch": "webpack --watch" }, "dependencies": { - "bootstrap": "^3.3.7", + "bootstrap": "^3", "bootstrap-datepicker": "^1.7.1", - "chart.js": "^1.0.2", + "chart.js": "^1", "jquery": "^3.3.1", "jquery-ui": "^1.11.2", "moment": "^2.8.2", @@ -23,19 +23,21 @@ "select2-bootstrap-theme": "0.1.0-beta.10" }, "devDependencies": { - "babel-core": "^6.26.0", - "babel-loader": "^7.1.2", - "babel-preset-env": "^1.6.1", - "css-loader": "^0.28.7", - "extract-text-webpack-plugin": "^3.0.2", - "file-loader": "^1.1.6", + "@babel/core": "^7.1.6", + "@babel/preset-env": "^7.1.6", + "babel-loader": "^8.0.4", + "css-loader": "^1.0.1", + "file-loader": "^2.0.0", "imports-loader": "^0.8.0", "less": "^3.0.2", "less-loader": "^4.0.5", + "mini-css-extract-plugin": "^0.4.5", "mkdirp": "^0.5.1", "npm-run-all": "^4.1.3", + "optimize-css-assets-webpack-plugin": "^5.0.1", "rimraf": "^2.6.2", - "style-loader": "^0.21.0", - "webpack": "^3" + "style-loader": "^0.23.1", + "webpack": "^4.26.1", + "webpack-cli": "^3.1.2" } } diff --git a/webpack.config.js b/webpack.config.js index 010a9667..8f1021fe 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,6 +1,7 @@ const path = require('path'); const webpack = require('webpack'); -const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const nodeEnv = (process.env.NODE_ENV || 'development').trim(); // eslint-disable-next-line @@ -14,7 +15,10 @@ const plugins = [ NODE_ENV: JSON.stringify(nodeEnv), }, }), - new ExtractTextPlugin('[name].css'), + new MiniCssExtractPlugin({ + filename: '[name].css', + chunkFilename: '[id]-[hash].css', + }), ]; @@ -24,6 +28,7 @@ for (let i = 0; i < 8; i++) { } module.exports = { + mode: __DEV__ ? 'development' : 'production', context: __dirname, resolve: { extensions: ['.js', '.jsx'], @@ -37,6 +42,9 @@ module.exports = { filename: '[name].js', publicPath: '', }, + optimization: { + minimizer: __DEV__ ? [] : [new OptimizeCSSAssetsPlugin({})], + }, module: { rules: [ { @@ -47,11 +55,16 @@ module.exports = { }, { test: /\.(eot|ttf|otf|svg|woff2?)(\?.*)?$/, loader: 'file-loader' }, { test: /\.json$/, loader: 'json-loader' }, - { test: /\.css$/, loader: 'style-loader!css-loader' }, - { test: /\.less$/, use: ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: 'css-loader!less-loader' - })} + { + test: /\.(less|css)$/, + use: [ + { + loader: __DEV__ ? 'style-loader' : MiniCssExtractPlugin.loader, + }, + { loader: 'css-loader', options: { importLoaders: 1 } }, + { loader: 'less-loader' }, + ] + } ], }, plugins,