Merge pull request statikstack#2 from pauloedurezende/master

Add support to cache files and organize webpack configs

Author: robertoachar

package.json

@@ -12,9 +12,9 @@
     "src"
   ],
   "scripts": {
-    "build": "webpack --env.env=prod",
+    "build": "webpack --env.mode=prod",
     "lint": "eslint statik/**/*.js",
-    "start": "webpack-dev-server --env.env=dev"
+    "start": "webpack-dev-server --env.mode=dev"
   },
   "repository": {
     "type": "git",

webpack.config.js

@@ -1,5 +1,5 @@
 module.exports = (env) => {
-  const config = require(`./webpack.${env.env}`);
+  const config = require(`./webpack/webpack.${env.mode}`);
 
   return config;
 };

webpack.common.js renamed to webpack/webpack.common.js

@@ -8,7 +8,7 @@ module.exports = {
     vendor: './statik/scripts/vendor.js'
   },
   output: {
-    filename: '[name].bundle.js',
+    filename: '[name].[chunkhash].bundle.js',
     path: path.resolve('dist')
   },
   module: {
@@ -39,7 +39,7 @@ module.exports = {
     ]
   },
   plugins: [
-    new CleanWebpackPlugin(['dist']),
+    new CleanWebpackPlugin(['dist'], { root: path.resolve() }),
     new HtmlWebpackPlugin({
       template: './statik/index.html'
     })

webpack.dev.js renamed to webpack/webpack.dev.js

@@ -18,7 +18,7 @@ module.exports = merge(common, {
       },
       {
         test: /\.(gif|jpg|png|svg|ico)$/,
-        include: path.resolve(__dirname, 'statik/images'),
+        include: path.resolve('statik', 'images'),
         use: ['file-loader']
       }
     ]

webpack.prod.js renamed to webpack/webpack.prod.js

@@ -40,7 +40,7 @@ module.exports = merge(common, {
       },
       {
         test: /\.(gif|jpg|png|svg|ico)$/,
-        include: path.resolve(__dirname, 'statik/images'),
+        include: path.resolve('statik', 'images'),
         use: [
           {
             loader: 'file-loader',
@@ -55,9 +55,17 @@ module.exports = merge(common, {
     ]
   },
   optimization: {
+    runtimeChunk: 'single',
     splitChunks: {
       chunks: 'all',
-      name: true
+      name: true,
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          chunks: 'all'
+        }
+      }
     },
     minimizer: [
       new OptimizeCSSAssetsPlugin({
@@ -73,6 +81,7 @@ module.exports = merge(common, {
     new UglifyJsWebpackPlugin({
       sourceMap: true
     }),
+    new webpack.HashedModuleIdsPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production')
     })