Updates to webpack 3 - check style clean up, and other lib update

Author: hirako2000

package.json

@@ -17,7 +17,7 @@
   "license": "MIT",
   "devDependencies": {
     "babel-core": "^6.25.0",
-    "babel-loader": "^7.0.0",
+    "babel-loader": "^7.1.0",
     "babel-plugin-inferno": "^3.1.0",
     "babel-preset-es2015": "^6.22.0",
     "compression-webpack-plugin": "^0.4.0",
@@ -29,13 +29,13 @@
     "extract-text-webpack-plugin": "^2.1.2",
     "file-loader": "^0.11.2",
     "html-loader": "^0.4.4",
-    "html-webpack-plugin": "^2.28.0",
+    "html-webpack-plugin": "^2.29.0",
     "less": "^2.7.2",
     "less-loader": "^4.0.4",
     "style-loader": "^0.18.2",
     "url-loader": "^0.5.9",
-    "webpack": "^2.6.1",
-    "webpack-dev-server": "^2.4.4",
+    "webpack": "^3.0.0",
+    "webpack-dev-server": "^2.5.0",
     "xo": "^0.18.2"
   },
   "dependencies": {

webpack.config.js

@@ -13,59 +13,59 @@ module.exports = function (env) {
   const plugins = [
     new webpack.optimize.CommonsChunkPlugin({
       names: ['inferno.vendor'],
-      chunks: ["inferno"],
-      minChunks: function(module) {
+      chunks: ['inferno'],
+      minChunks: function (module) {
         return isExternal(module)
-      },
+      }
     }),
     new webpack.optimize.CommonsChunkPlugin({
-      name: "purecss.vendor",
-      chunks: ["purecss"],
-      minChunks: function(module, count){
+      name: 'purecss.vendor',
+      chunks: ['purecss'],
+      minChunks: function (module) {
         return isExternal(module)
-      },
+      }
     }),
     new webpack.optimize.CommonsChunkPlugin({
-      name: "mincss.vendor",
-      chunks: ["mincss"],
-      minChunks: function(module, count){
+      name: 'mincss.vendor',
+      chunks: ['mincss'],
+      minChunks: function (module) {
         return isExternal(module)
-      },
+      }
     }),
     new webpack.optimize.CommonsChunkPlugin({
-      name: "photo.vendor",
-      chunks: ["photo"],
-      minChunks: function(module, count){
+      name: 'photo.vendor',
+      chunks: ['photo'],
+      minChunks: function (module) {
         return isExternal(module)
-      },
+      }
     }),
     new webpack.DefinePlugin({
-      'process.env': { NODE_ENV: JSON.stringify(nodeEnv) }
+      'process.env': {NODE_ENV: JSON.stringify(nodeEnv)}
     }),
     new webpack.NamedModulesPlugin(),
     new HtmlWebpackPlugin({
       filename: 'inferno.html',
-       title: 'Inferno',
-       template: 'inferno/index-template.html',
-       chunks: ['inferno.vendor', 'inferno'],
+      title: 'Inferno',
+      template: 'inferno/index-template.html',
+      chunks: ['inferno.vendor', 'inferno']
     }),
     new HtmlWebpackPlugin({
       filename: 'purecss.html',
       title: 'PureCSS',
       template: 'purecss/index-template.html',
-      chunks: ['purecss.vendor', 'purecss'],
-   }),
+      chunks: ['purecss.vendor', 'purecss']
+    }),
     new HtmlWebpackPlugin({
       filename: 'mincss.html',
       title: 'MINCSS',
       template: 'mincss/index-template.html',
-      chunks: ['mincss.vendor', 'mincss'],
+      chunks: ['mincss.vendor', 'mincss']
     }),
     new HtmlWebpackPlugin({
       filename: 'photo.html',
       title: 'Photo',
       template: 'photo/index-template.html',
-      chunks: ['photo.vendor', 'photo'],
+      chunks: ['photo.vendor', 'photo']
     })
   ]
 
@@ -85,13 +85,14 @@ module.exports = function (env) {
         sourceMap: true
       }),
       new CompressionPlugin({
-           asset: "[path].gz[query]",
-           algorithm: "gzip",
-           test: /\.js$|\.css$|\.html$|\.eot$|\.svg$|\.ttf$|\.woff$/,
-           threshold: 1024,
-           minRatio: 0.8
-       }),
-       new ExtractTextPlugin("[name].css")
+        asset: '[path].gz[query]',
+        algorithm: 'gzip',
+        test: /\.js$|\.css$|\.html$|\.eot$|\.svg$|\.ttf$|\.woff$/,
+        threshold: 1024,
+        minRatio: 0.8
+      }),
+      new ExtractTextPlugin('[name].css'),
+      new webpack.optimize.ModuleConcatenationPlugin()
     )
   } else {
     plugins.push(
@@ -110,7 +111,7 @@ module.exports = function (env) {
     },
     output: {
       path: __dirname + '/static',
-      filename: '[name].js',
+      filename: '[name].js'
     },
     module: {
       rules: [
@@ -120,8 +121,8 @@ module.exports = function (env) {
             loader: 'html-loader',
             query: {
               name: '[name].[ext]'
-            },
-          },
+            }
+          }
         },
         {
           test: /\.less$/,
@@ -133,23 +134,23 @@ module.exports = function (env) {
         },
         {
           test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-          loader: isProd ? "file-loader?limit=10000&mimetype=application/font-woff" : "url-loader?limit=10000&mimetype=application/font-woff"
+          loader: isProd ? 'file-loader?limit=10000&mimetype=application/font-woff' : 'url-loader?limit=10000&mimetype=application/font-woff'
         },
         {
           test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-          loader: isProd ? "file-loader" : "url-loader"
+          loader: isProd ? 'file-loader' : 'url-loader'
         },
         {
           test: /\.(jpg|jpeg|png)$/,
-          loader: isProd ? "file-loader" : "url-loader"
+          loader: isProd ? 'file-loader' : 'url-loader'
         },
         {
           test: /\.(js|jsx)$/,
           use: [
             'babel-loader'
-          ],
-        },
-      ],
+          ]
+        }
+      ]
     },
     resolve: {
       extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
@@ -164,12 +165,12 @@ module.exports = function (env) {
     performance: isProd && {
       maxAssetSize: 100000,
       maxEntrypointSize: 100000,
-      hints: 'warning',
+      hints: 'warning'
     },
 
     stats: {
       colors: {
-        green: '\u001b[32m',
+        green: '\u001b[32m'
       }
     },
 
@@ -191,15 +192,15 @@ module.exports = function (env) {
         version: false,
         warnings: true,
         colors: {
-          green: '\u001b[32m',
+          green: '\u001b[32m'
         }
-      },
+      }
     }
   }
 }
 
 function isExternal(module) {
-  var userRequest = module.userRequest
+  const userRequest = module.userRequest
 
   if (typeof userRequest !== 'string') {
     return false
@@ -227,12 +228,12 @@ function lessNonExtractTextLoader() {
 
 function extractTextLoader() {
   return ExtractTextPlugin.extract({
-     fallback: 'style-loader', use: 'css-loader'
-   })
+    fallback: 'style-loader', use: 'css-loader'
+  })
 }
 
 function lessExtractTextLoader() {
   return ExtractTextPlugin.extract({
-     fallback: 'style-loader', use: 'css-loader!less-loader'
-   })
+    fallback: 'style-loader', use: 'css-loader!less-loader'
+  })
 }