Merge pull request #669 from lgaitan/webpack-v4

Webpack 4 Upgrade

package.json

@@ -88,13 +88,12 @@
     "eslint-plugin-import": "2.9.0",
     "eslint-plugin-jest": "21.14.0",
     "eslint-plugin-react": "7.7.0",
-    "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "1.1.11",
     "flow-bin": "0.69.0",
     "flow-runtime": "0.17.0",
-    "friendly-errors-webpack-plugin": "1.6.1",
+    "friendly-errors-webpack-plugin": "1.7.0",
     "github-markdown-css": "2.10.0",
-    "html-webpack-plugin": "2.30.1",
+    "html-webpack-plugin": "3.2.0",
     "husky": "0.15.0-rc.8",
     "identity-obj-proxy": "3.0.0",
     "in-publish": "2.0.0",
@@ -103,6 +102,7 @@
     "jest-environment-jsdom-global": "1.0.3",
     "jest-environment-node": "22.4.1",
     "localstorage-memory": "1.0.2",
+    "mini-css-extract-plugin": "0.4.0",
     "node-mocks-http": "1.6.7",
     "node-sass": "4.7.2",
     "normalize.css": "8.0.0",
@@ -122,13 +122,14 @@
     "stylelint": "9.1.1",
     "stylelint-config-recommended-scss": "3.1.0",
     "stylelint-scss": "2.5.0",
-    "stylelint-webpack-plugin": "0.10.3",
+    "stylelint-webpack-plugin": "0.10.4",
     "supertest": "3.0.0",
     "url-loader": "0.6.2",
     "verdaccio-auth-memory": "0.0.4",
     "verdaccio-memory": "1.0.1",
-    "webpack": "3.10.0",
+    "webpack": "4.6.0",
-    "webpack-dev-server": "2.11.1",
+    "webpack-cli": "2.0.15",
+    "webpack-dev-server": "3.1.3",
     "webpack-merge": "4.1.2",
     "whatwg-fetch": "2.0.3"
   },
@@ -163,7 +164,7 @@
     "code:docker-build": "cross-env BABEL_ENV=registry-docker babel src/ --out-dir build/ --ignore src/webui/ --copy-files",
     "pre:webpack": "rimraf static/*",
     "dev:webui": "cross-env BABEL_ENV=ui babel-node tools/dev.server.js",
-    "build:webui": "npm run pre:webpack && BABEL_ENV=ui webpack --config tools/webpack.prod.config.babel.js",
+    "build:webui": "npm run pre:webpack && cross-env BABEL_ENV=ui webpack --config tools/webpack.prod.config.babel.js",
     "build:docker": "docker build -t verdaccio . --no-cache",
     "build:docker:rpi": "docker build -f Dockerfile.rpi -t verdaccio:rpi ."
   },

tools/dev.server.js

@@ -6,7 +6,7 @@ import env from '../src/config/env';
 
 const compiler = webpack(config);
 const spinner = ora('Compiler is running...').start();
-compiler.plugin('done', () => {
+compiler.hooks.done.tap('Verdaccio Dev Server', () => {
   if (!global.rebuild) {
     spinner.stop();
     console.log('Dev Server Listening at http://localhost:4872/');

tools/webpack.config.js

@@ -1,8 +1,6 @@
 const env = require('../src/config/env');
 const StyleLintPlugin = require('stylelint-webpack-plugin');
 
-const isDev = process.env.NODE_ENV === 'development';
-
 module.exports = {
   entry: `${env.SRC_ROOT}/webui/src/index.js`,
 
@@ -86,8 +84,6 @@ module.exports = {
     ],
   },
 
-  devtool: isDev ? 'source-map' : false,
-
   stats: {
     children: false,
   },

tools/webpack.dev.config.babel.js

@@ -8,6 +8,9 @@ import getPackageVersion from './getPackageVersion';
 
 export default {
   ...baseConfig,
+
+  mode: 'development',
+
   entry: {
     main: [
       'whatwg-fetch',
@@ -28,7 +31,6 @@ export default {
   plugins: [
     new webpack.DefinePlugin({
       __DEBUG__: true,
-      'process.env.NODE_ENV': '"development"',
       __APP_VERSION__: `"${getPackageVersion()}"`,
     }),
     new HTMLWebpackPlugin({

tools/webpack.prod.config.babel.js

@@ -1,6 +1,7 @@
 const webpack = require('webpack');
 const HTMLWebpackPlugin = require('html-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin');
 const baseConfig = require('./webpack.config');
 const env = require('../src/config/env');
 const _ = require('lodash');
@@ -8,6 +9,8 @@ const merge = require('webpack-merge');
 import getPackageVersion from './getPackageVersion';
 
 const prodConf = {
+  mode: 'production',
+
   entry: {
     main: ['babel-polyfill', 'whatwg-fetch', `${env.SRC_ROOT}/webui/src/index.js`],
   },
@@ -22,13 +25,9 @@ const prodConf = {
       'process.env.NODE_ENV': '"production"',
       __APP_VERSION__: `"${getPackageVersion()}"`,
     }),
-    new webpack.optimize.UglifyJsPlugin({
+    new MiniCssExtractPlugin({
-      sourceMap: true,
+      filename: 'style.[contenthash].css',
-      compress: {
-        warnings: false,
-      },
     }),
-    new ExtractTextPlugin('style.[contenthash].css'),
     new HTMLWebpackPlugin({
       title: 'ToReplaceByTitle',
       filename: 'index.html',
@@ -37,18 +36,22 @@ const prodConf = {
       debug: false,
       inject: true,
     }),
-    new webpack.NoEmitOnErrorsPlugin(),
   ],
+
+  optimization: {
+    minimizer: [
+      new UglifyJsWebpackPlugin({
+        sourceMap: true,
+      }),
+    ],
+  },
 };
 
 prodConf.module.rules = baseConfig.module.rules
   .filter((loader) =>
     Array.isArray(loader.use) && loader.use.find((v) => /css/.test(v.loader.split('-')[0]))
   ).forEach((loader) => {
-  loader.use = ExtractTextPlugin.extract({
+    loader.use = [MiniCssExtractPlugin.loader].concat(_.tail(loader.use));
-    fallback: 'style-loader',
-    use: _.tail(loader.use),
-  });
 });
 
 module.exports = merge(baseConfig, prodConf);