update dependencies

package.json

@@ -32,31 +32,32 @@
   "devDependencies": {
     "art-template": "4.12.2",
     "art-template-loader": "1.4.3",
-    "autoprefixer": "^8.0.0",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.1",
-    "cross-env": "^5.1.3",
-    "css-loader": "^0.28.9",
-    "eslint": "^4.18.1",
-    "eslint-loader": "^1.9.0",
+    "autoprefixer": "^8.6.2",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.4",
+    "babel-preset-env": "^1.7.0",
+    "cross-env": "^5.2.0",
+    "css-loader": "^0.28.11",
+    "eslint": "^4.19.1",
+    "eslint-loader": "^2.0.0",
     "exports-loader": "^0.7.0",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.9",
-    "git-revision-webpack-plugin": "^2.5.1",
-    "node-sass": "^4.7.2",
-    "postcss-loader": "^2.1.0",
-    "sass-loader": "^6.0.6",
+    "file-loader": "^1.1.11",
+    "git-revision-webpack-plugin": "^3.0.3",
+    "node-sass": "^4.9.0",
+    "postcss-loader": "^2.1.5",
+    "sass-loader": "^7.0.3",
     "strip-loader": "^0.1.2",
-    "style-loader": "^0.20.2",
+    "style-loader": "^0.21.0",
     "svg-inline-loader": "0.8.0",
     "template-string-optimize-loader": "^2.2.3",
-    "url-loader": "^0.6.2",
-    "webpack": "^3.11.0",
-    "webpack-dev-server": "^2.11.1"
+    "url-loader": "^1.0.1",
+    "webpack": "^4.12.0",
+    "webpack-dev-server": "^3.1.4"
   },
   "dependencies": {
     "balloon-css": "^0.5.0",
-    "promise-polyfill": "7.1.0"
+    "mini-css-extract-plugin": "0.4.0",
+    "promise-polyfill": "8.0.0",
+    "webpack-cli": "3.0.4"
   }
 }

webpack/dev.config.js

@@ -6,6 +6,8 @@ const gitRevisionPlugin = new GitRevisionPlugin();
 
 module.exports = {
 
+    mode: 'development',
+
     devtool: 'cheap-module-source-map',
 
     entry: {
@@ -33,14 +35,14 @@ module.exports = {
             {
                 test: /\.js$/,
                 enforce: 'pre',
-                loader: require.resolve('eslint-loader'),
+                loader: 'eslint-loader',
                 include: path.resolve(__dirname, '../src/js'),
             },
             {
                 test: /\.js$/,
                 use: [
                     {
-                        loader: require.resolve('babel-loader'),
+                        loader: 'babel-loader',
                         options: {
                             cacheDirectory: true,
                             presets: ['env']
@@ -51,27 +53,27 @@ module.exports = {
             {
                 test: /\.scss$/,
                 use: [
-                    require.resolve('style-loader'),
+                    'style-loader',
                     {
-                        loader: require.resolve('css-loader'),
+                        loader: 'css-loader',
                         options: {
                             importLoaders: 1
                         }
                     },
                     {
-                        loader: require.resolve('postcss-loader'),
+                        loader: 'postcss-loader',
                         options: {
                             config: {
                                 path: path.join(__dirname, 'postcss.config.js')
                             }
                         }
                     },
-                    require.resolve('sass-loader')
+                    'sass-loader'
                 ]
             },
             {
                 test: /\.(png|jpg)$/,
-                loader: require.resolve('url-loader'),
+                loader: 'url-loader',
                 options: {
                     'limit': 40000
                 }
@@ -102,7 +104,6 @@ module.exports = {
     },
 
     plugins: [
-        new webpack.NamedModulesPlugin(),
         new webpack.DefinePlugin({
             DPLAYER_VERSION: `"${require('../package.json').version}"`,
             GIT_HASH: JSON.stringify(gitRevisionPlugin.version())

webpack/prod.config.js

@@ -1,12 +1,14 @@
 /* eslint-disable no-undef */
 const path = require('path');
 const webpack = require('webpack');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const GitRevisionPlugin = require('git-revision-webpack-plugin');
 const gitRevisionPlugin = new GitRevisionPlugin();
 
 module.exports = {
 
+    mode: 'production',
+
     bail: true,
 
     devtool: 'source-map',
@@ -36,15 +38,15 @@ module.exports = {
             {
                 test: /\.js$/,
                 enforce: 'pre',
-                loader: require.resolve('eslint-loader'),
+                loader: 'eslint-loader',
                 include: path.resolve(__dirname, '../src/js'),
             },
             {
                 test: /\.js$/,
                 use: [
-                    require.resolve('template-string-optimize-loader'),
+                    'template-string-optimize-loader',
                     {
-                        loader: require.resolve('babel-loader'),
+                        loader: 'babel-loader',
                         options: {
                             compact: true,
                             presets: ['env']
@@ -54,32 +56,30 @@ module.exports = {
             },
             {
                 test: /\.scss$/,
-                use: ExtractTextPlugin.extract({
-                    fallback: require.resolve('style-loader'),
-                    use: [
-                        {
-                            loader: require.resolve('css-loader'),
-                            options: {
-                                importLoaders: 1,
-                                minimize: true,
-                                sourceMap: true
-                            }
-                        },
-                        {
-                            loader: require.resolve('postcss-loader'),
-                            options: {
-                                config: {
-                                    path: path.join(__dirname, 'postcss.config.js')
-                                }
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            importLoaders: 1,
+                            minimize: true,
+                            sourceMap: true
+                        }
+                    },
+                    {
+                        loader: 'postcss-loader',
+                        options: {
+                            config: {
+                                path: path.join(__dirname, 'postcss.config.js')
                             }
-                        },
-                        require.resolve('sass-loader')
-                    ]
-                })
+                        }
+                    },
+                    'sass-loader',
+                ]
             },
             {
                 test: /\.(png|jpg)$/,
-                loader: require.resolve('url-loader'),
+                loader: 'url-loader',
                 options: {
                     'limit': 40000
                 }
@@ -100,17 +100,7 @@ module.exports = {
             DPLAYER_VERSION: `"${require('../package.json').version}"`,
             GIT_HASH: JSON.stringify(gitRevisionPlugin.version())
         }),
-        new webpack.optimize.UglifyJsPlugin({
-            compress: {
-                warnings: false
-            },
-            output: {
-                comments: false,
-                ascii_only: true
-            },
-            sourceMap: true
-        }),
-        new ExtractTextPlugin({
+        new MiniCssExtractPlugin({
             filename: '[name].min.css'
         })
     ],