From 748f88902cde233c51b722aef3e46f7ee4a75eeb Mon Sep 17 00:00:00 2001
From: Roosted7 <thomasroos@live.nl>
Date: Thu, 12 Apr 2018 23:49:23 +0200
Subject: [PATCH] Update packages and add analyze option
---
.gitignore | 3 +++
package.json | 20 +++++++++++---------
webpack.common.js | 2 +-
webpack.dev.js | 3 ++-
webpack.prod.js | 32 ++++++++++++++++++++------------
5 files changed, 37 insertions(+), 23 deletions(-)
diff --git a/.gitignore b/.gitignore
index 4e0553ea6..b3a007ce7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -82,3 +82,6 @@ __pycache__/
# development data
data-dev
+
+# webpack analyze data
+stats.json
\ No newline at end of file
diff --git a/package.json b/package.json
index 65f1f491e..d33cb4811 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
"scripts": {
"dev": "concurrently --kill-others --names \"WEBPACK,PYTHON\" --prefix-colors \"bgBlue.bold,bgGreen.bold\" \"webpack-dev-server --hot --inline --progress --config webpack.dev.js\" \"ZESJE_SETTINGS=$(pwd)/zesje.dev.cfg python3 zesje\"",
"build": "webpack --config webpack.prod.js",
- "start": "ZESJE_SETTINGS=$(pwd)/zesje.dev.cfg python3 zesje"
+ "start": "ZESJE_SETTINGS=$(pwd)/zesje.dev.cfg python3 zesje",
+ "analyze": "webpack --config webpack.prod.js --json > stats.json; webpack-bundle-analyzer stats.json"
},
"dependencies": {
"babel-plugin-syntax-dynamic-import": "^6.18.0",
@@ -15,15 +16,14 @@
"bulma": "^0.6.2",
"concurrently": "^3.5.1",
"css-loader": "^0.28.8",
- "extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.6",
"font-awesome": "^4.7.0",
- "formik": "^0.10.5",
"fuse.js": "^3.2.0",
"get-closest": "^0.0.4",
- "html-webpack-plugin": "^2.30.1",
+ "html-webpack-plugin": "^3.2.0",
+ "mini-css-extract-plugin": "^0.4.0",
"mousetrap": "^1.6.1",
- "optimize-css-assets-webpack-plugin": "^3.2.0",
+ "optimize-css-assets-webpack-plugin": "^4.0.0",
"path": "^0.12.7",
"raw-loader": "^0.5.1",
"react": "^16.2.0",
@@ -34,10 +34,11 @@
"react-numeric-input": "^2.2.3",
"react-router-dom": "^4.2.2",
"react-table": "^6.7.6",
- "style-loader": "^0.19.1",
+ "style-loader": "^0.20.3",
"uglifyjs-webpack-plugin": "^1.1.6",
- "url-loader": "^0.6.2",
- "webpack": "^3.10.0",
+ "url-loader": "^1.0.1",
+ "webpack": "^4.5.0",
+ "webpack-cli": "^2.0.14",
"webpack-merge": "^4.1.1"
},
"devDependencies": {
@@ -45,6 +46,7 @@
"babel-loader": "^7.1.2",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
- "webpack-dev-server": "^2.10.1"
+ "webpack-bundle-analyzer": "^2.11.1",
+ "webpack-dev-server": "^3.1.3"
}
}
diff --git a/webpack.common.js b/webpack.common.js
index f6faf2a82..7d07d13ee 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -19,7 +19,7 @@ module.exports = {
publicPath: '/'
},
module: {
- loaders: [
+ rules: [
{ test: /\.(jsx|js)$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.(png|jpg|gif)$/, loader: "file-loader" },
{ test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
diff --git a/webpack.dev.js b/webpack.dev.js
index e13056f76..d8dc133ef 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -3,8 +3,9 @@ const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
+ mode: 'development',
module: {
- loaders: [
+ rules: [
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
]
},
diff --git a/webpack.prod.js b/webpack.prod.js
index 42409997c..43bf21545 100644
--- a/webpack.prod.js
+++ b/webpack.prod.js
@@ -1,33 +1,41 @@
const webpack = require('webpack');
const merge = require('webpack-merge');
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
+
+ mode: 'production',
module: {
- loaders: [
- { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" })}
+ rules: [
+ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader" ]}
]
},
-
devtool: 'source-map',
- plugins: [
- new UglifyJsPlugin({
- parallel: true,
+ optimization: {
+ minimizer: [
+ new UglifyJsPlugin({
cache: true,
+ parallel: true,
sourceMap: true
}),
- new webpack.DefinePlugin({
- 'process.env.NODE_ENV': JSON.stringify('production')
- }),
- new ExtractTextPlugin("styles.css"),
- new OptimizeCssAssetsPlugin({
+ new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: {removeAll: true } },
canPrint: true
})
+ ]
+ },
+ plugins: [
+ new webpack.DefinePlugin({
+ 'process.env.NODE_ENV': JSON.stringify('production')
+ }),
+ new MiniCssExtractPlugin({
+ filename: "[name].css",
+ chunkFilename: "[id].css"
+ })
]
})
\ No newline at end of file
--
GitLab