diff --git a/package.json b/package.json index 4b2639b..4efdf30 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,6 @@ "eslint-plugin-flowtype": "^2.46.3", "eslint-plugin-react": "^7.3.0", "exports-loader": "^0.7.0", - "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^4.0.0", "flow-bin": "~0.102.0", "html-loader": "^0.5.5", @@ -120,6 +119,7 @@ "karma-sourcemap-loader": "*", "karma-webpack": "^4.0.2", "loader-utils": "^1.0.0", + "mini-css-extract-plugin": "^0.8.0", "mocha": "^6.1.4", "node-sass": "^4.7.2", "postcss-import": "^12.0.1", diff --git a/webpack.config.js b/webpack.config.js index 6e06ee0..ecfedf6 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,7 +5,7 @@ require('@babel/register'); const path = require('path'); const webpack = require('webpack'); const chalk = require('chalk'); -const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const SitemapPlugin = require('sitemap-webpack-plugin').default; const CSPPlugin = require('csp-webpack-plugin'); @@ -29,6 +29,9 @@ try { } } +// TODO: add progress plugin +// TODO: configure bundle analyzer + /** * TODO: https://babeljs.io/docs/plugins/ * TODO: отдельные конфиги для env (аля https://github.com/davezuko/react-redux-starter-kit) @@ -96,17 +99,15 @@ const webpackConfig = { 'window.GA_ID': config.ga && config.ga.id ? JSON.stringify(config.ga.id) - : undefined, - 'process.env': { - NODE_ENV: JSON.stringify(process.env.NODE_ENV), - APP_ENV: JSON.stringify( - config.environment || process.env.NODE_ENV - ), - __VERSION__: JSON.stringify(config.version || ''), - __DEV__: !isProduction, - __TEST__: isTest, - __PROD__: isProduction - } + : undefined + }), + new webpack.EnvironmentPlugin({ + NODE_ENV: process.env.NODE_ENV, + APP_ENV: config.environment || process.env.NODE_ENV, + __VERSION__: config.version || '', + __DEV__: !isProduction, + __TEST__: isTest, + __PROD__: isProduction }), new HtmlWebpackPlugin({ template: 'src/index.ejs', @@ -135,6 +136,8 @@ const webpackConfig = { changeFreq: 'weekly' } ), + // TODO: remove this in future. We should explicitly import: + // `import React from 'react'` in each file, where it is required new webpack.ProvidePlugin({ React: 'react' }), @@ -240,32 +243,33 @@ const webpackConfig = { }; if (isProduction) { - webpackConfig.module.loaders.forEach((loader) => { - if (loader.use && loader.use[0] === 'style') { - // remove style-loader from chain and pass through ExtractTextPlugin - loader.use = ExtractTextPlugin.extract({ - fallbackLoader: loader.use[0], // style-loader - loader: loader.use - }); + webpackConfig.module.rules.forEach((rule) => { + if (rule.use && rule.use[0] === 'style-loader') { + // replace `style-loader` with `MiniCssExtractPlugin` + rule.use[0] = MiniCssExtractPlugin.loader; } }); webpackConfig.plugins.push( - new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js?[hash]'), - new webpack.optimize.DedupePlugin(), - new webpack.optimize.UglifyJsPlugin(), - new ExtractTextPlugin('styles.css?[hash]', { - allChunks: true + // TODO: configure optimisations + // new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js?[hash]'), + // new webpack.optimize.DedupePlugin(), + // new webpack.optimize.UglifyJsPlugin(), + new MiniCssExtractPlugin({ + filename: '[name].css?[hash]', + chunkFilename: '[id].css?[hash]', }) ); webpackConfig.devtool = 'hidden-source-map'; - const ignoredPlugins = ['flag-icon-css']; + // TODO: remove me after migration + // With this code we have tried to configure which deps have go into the 'vendor.js' chunk + // const ignoredPlugins = ['flag-icon-css']; - webpackConfig.entry.vendor = Object.keys(packageJson.dependencies).filter( - (module) => !ignoredPlugins.includes(module) - ); + // webpackConfig.entry.vendor = Object.keys(packageJson.dependencies).filter( + // (module) => !ignoredPlugins.includes(module) + // ); } else { webpackConfig.plugins.push( new webpack.DllReferencePlugin({ @@ -276,6 +280,7 @@ if (isProduction) { } if (!isProduction && !isTest) { + // TODO: review HMR integration webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin()); webpackConfig.devServer = { diff --git a/yarn.lock b/yarn.lock index b7a4053..cd7a591 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1368,16 +1368,6 @@ ajv-keywords@^3.1.0: resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.0.tgz#4b831e7b531415a7cc518cd404e73f6193c6349d" integrity sha512-aUjdRFISbuFOl0EIZc+9e4FfZp0bDZgAdOOf30bJmw8VM9v84SHyVyxDfbWxpGYbdZD/9XoKxfHVNmxPkhwyGw== -ajv@^5.0.0: - version "5.5.1" - resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.1.tgz#b38bb8876d9e86bee994956a04e721e88b248eb2" - integrity sha1-s4u4h22ehr7plJVqBOch6IskjrI= - dependencies: - co "^4.6.0" - fast-deep-equal "^1.0.0" - fast-json-stable-stringify "^2.0.0" - json-schema-traverse "^0.3.0" - ajv@^5.2.3, ajv@^5.3.0: version "5.5.2" resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965" @@ -1684,7 +1674,7 @@ async@^1.5.2: resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo= -async@^2.4.1, async@^2.6.2: +async@^2.6.2: version "2.6.2" resolved "https://registry.yarnpkg.com/async/-/async-2.6.2.tgz#18330ea7e6e313887f5d2f2a904bac6fe4dd5381" integrity sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg== @@ -4000,16 +3990,6 @@ extglob@^2.0.4: snapdragon "^0.8.1" to-regex "^3.0.1" -extract-text-webpack-plugin@^3.0.2: - version "3.0.2" - resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.2.tgz#5f043eaa02f9750a9258b78c0a6e0dc1408fb2f7" - integrity sha512-bt/LZ4m5Rqt/Crl2HiKuAl/oqg0psx1tsTLkvWbJen1CtD+fftkZhMaQ9HOtY2gWsl2Wq+sABmMVi9z3DhKWQQ== - dependencies: - async "^2.4.1" - loader-utils "^1.1.0" - schema-utils "^0.3.0" - webpack-sources "^1.0.1" - extsprintf@1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05" @@ -5360,7 +5340,7 @@ is-path-inside@^2.1.0: dependencies: path-is-inside "^1.0.2" -is-plain-obj@^1.1.0: +is-plain-obj@^1.0.0, is-plain-obj@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e" integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4= @@ -6244,6 +6224,16 @@ mini-create-react-context@^0.3.0: gud "^1.0.0" tiny-warning "^1.0.2" +mini-css-extract-plugin@^0.8.0: + version "0.8.0" + resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz#81d41ec4fe58c713a96ad7c723cdb2d0bd4d70e1" + integrity sha512-MNpRGbNA52q6U92i0qbVpQNsgk7LExy41MdAlG84FeytfDOtRIf/mCHdEgG8rpTKOaNKiqUnZdlptF469hxqOw== + dependencies: + loader-utils "^1.1.0" + normalize-url "1.9.1" + schema-utils "^1.0.0" + webpack-sources "^1.1.0" + minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7" @@ -6689,6 +6679,16 @@ normalize-path@^3.0.0: resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== +normalize-url@1.9.1: + version "1.9.1" + resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c" + integrity sha1-LMDWazHqIwNkWENuNiDYWVTGbDw= + dependencies: + object-assign "^4.0.1" + prepend-http "^1.0.0" + query-string "^4.1.0" + sort-keys "^1.0.0" + normalize-url@^3.0.0: version "3.3.0" resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559" @@ -7651,6 +7651,11 @@ prelude-ls@~1.1.2: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ= +prepend-http@^1.0.0: + version "1.0.4" + resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" + integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= + pretty-error@^2.0.2: version "2.1.1" resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3" @@ -7857,6 +7862,14 @@ qs@~6.5.2: resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA== +query-string@^4.1.0: + version "4.3.4" + resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb" + integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s= + dependencies: + object-assign "^4.1.0" + strict-uri-encode "^1.0.0" + querystring-es3@^0.2.0: version "0.2.1" resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73" @@ -8662,13 +8675,6 @@ scheduler@^0.13.6: loose-envify "^1.1.0" object-assign "^4.1.1" -schema-utils@^0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf" - integrity sha1-9YdyIs4+kx7a4DnxfrNxbnE3+M8= - dependencies: - ajv "^5.0.0" - schema-utils@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770" @@ -8979,6 +8985,13 @@ sockjs@0.3.19: faye-websocket "^0.10.0" uuid "^3.0.1" +sort-keys@^1.0.0: + version "1.1.2" + resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad" + integrity sha1-RBttTTRnmPG05J6JIK37oOVD+a0= + dependencies: + is-plain-obj "^1.0.0" + source-list-map@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34" @@ -9213,6 +9226,11 @@ streamroller@^1.0.5: fs-extra "^7.0.1" lodash "^4.17.11" +strict-uri-encode@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" + integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM= + string-width@^1.0.1, string-width@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3" @@ -10215,7 +10233,15 @@ webpack-log@^2.0.0: ansi-colors "^3.0.0" uuid "^3.3.2" -webpack-sources@^1.0.1, webpack-sources@^1.3.0: +webpack-sources@^1.1.0: + version "1.4.3" + resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933" + integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ== + dependencies: + source-list-map "^2.0.0" + source-map "~0.6.1" + +webpack-sources@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85" integrity sha512-OiVgSrbGu7NEnEvQJJgdSFPl2qWKkWq5lHMhgiToIiN9w34EBnjYzSYs+VbL5KoYiLNtFFa7BZIKxRED3I32pA==