lib/generators/rocket_cms/templates/webpack.config.js in rocket_cms-0.24.0 vs lib/generators/rocket_cms/templates/webpack.config.js in rocket_cms-0.25.0

@@ -1,141 +1,175 @@
 'use strict';
 
 var path = require('path');
 var webpack = require('webpack');
-var functions = require('postcss-functions');
-var StatsPlugin = require('stats-webpack-plugin');
+var ManifestPlugin = require('webpack-manifest-plugin');
 
 var ExtractTextPlugin = require("extract-text-webpack-plugin");
-
 var autoprefixer = require('autoprefixer');
 var CompressionPlugin = require("compression-webpack-plugin");
 
 var host = process.env.HOST || 'localhost'
-var devServerPort = 3808;
+var devServerPort = <%= port %>;
 
 var production = process.env.NODE_ENV === 'production';
 
 const extractSass = new ExtractTextPlugin({
-    filename: production ? "[name].[contenthash].css" : "[name].css",
+  filename: production ? "[name]-[chunkhash].css" : "[name].css",
 });
 
-//console.log("dir:", __dirname)
-
 var sassExtractor = () => {
-  return ['css-hot-loader'].concat(extractSass.extract({
+  return ['extracted-loader'].concat(extractSass.extract({
     use: [{
+      loader: "babel-loader",
+      options: {
+        cacheDirectory: true
+      }
+    }, {
       loader: "css-loader",
       options: {
-        sourceMap: true
+        minimize: !production,
+        sourceMap: !production,
       }
     }, {
       loader: "sass-loader",
       options: {
-        sourceMap: true
+        sourceMap: !production,
+        includePaths: [path.resolve(__dirname, "..", "webpack")]
       }
     }],
     fallback: "style-loader"
   }));
 }
 
 var config = {
+  mode: production ? "production" : "development",
   entry: {
-    // Sources are expected to live in $app_root/webpack
-    vendor: [
-      'babel-polyfill',
-      'axios',
-      'jquery',
-      'lodash',
-    ],
-    application: 'application.es6'
+    // Sources are expected to live in $app_root
+    //vendor: [],
+    application: 'application.es6',
   },
 
   module: {
       rules: [
-          { test: /\.es6/, use: "babel-loader" },
-          { test: /\.handlebars$/, use: "handlebars-loader" },
-          { test: /\.(jpe?g|png|gif)$/i, use: "file-loader" },
           {
-            test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
-            use: production ? 'file-loader' : 'url-loader'
+            test: /(\.es6)$/,
+            use: {
+              loader: "babel-loader",
+              options: {
+                cacheDirectory: true
+              }
+            }
           },
-          { test: /\.sass$/, use: sassExtractor() },
-          { test: /\.scss$/, use: sassExtractor() },
-          { test: /\.css$/, use: sassExtractor() }
+          {
+            test: /(\.pug)$/,
+            loader: "pug-loader",
+            query: {}
+          },
+          {
+            test: /\.vue/,
+            use: {
+              loader: "vue-loader",
+            }
+          },
+          {
+            test: /\.(jpe?g|png|gif)$/i,
+            use: "file-loader"
+          },
+          {
+            test: /\.svg$/i,
+            exclude: /inline/i,
+            use: "file-loader"
+          },
+          {
+            test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.otf($|\?)|\.eot($|\?)/,
+            use: 'file-loader'
+          },
+          {
+            test: /\.(s?css|sass)$/i,
+            use: sassExtractor()
+          },
       ]
   },
 
   output: {
     // Build assets directly in to public/webpack/, let webpack know
     // that all webpacked assets start with webpack/
 
     // must match config.webpack.output_dir
-    path: path.join(__dirname, '..', 'public', 'webpack'),
+    path: path.join(__dirname, "..", "public", "webpack"),
     publicPath: '/webpack/',
 
-    filename: production ? '[name]-[chunkhash].js' : '[name].js'
+    filename: production ? '[name]-[chunkhash].js' : '[name].js',
+    chunkFilename: production ? '[name]-[chunkhash].js' : '[name].js',
   },
 
   resolve: {
-    modules: [path.resolve(__dirname, "..", "webpack"), path.resolve(__dirname, "..", "node_modules")],
-    extensions: [".js", ".es6", ".css", ".sass", ".scss"],
+    modules: [
+      path.resolve(__dirname, "..", "webpack"),
+      path.resolve(__dirname, "..", "node_modules"),
+    ],
+    extensions: [".es6", ".vue", ".sass", ".css", ".js"],
+    alias: {
+      '~': path.resolve(__dirname, "..", "webpack"),
+    }
   },
 
   plugins: [
     extractSass,
-    new StatsPlugin('manifest.json', {
-      chunkModules: false,
-      source: false,
-      chunks: false,
-      modules: false,
-      assets: true
+    new ManifestPlugin({
+      writeToFileEmit: true,
+      publicPath: production ? "/webpack/" : 'http://' + host + ':' + devServerPort + '/webpack/',
     }),
     new webpack.ProvidePlugin({
-      $: "jquery/dist/jquery",
-      jQuery: "jquery/dist/jquery",
-      "window.jQuery": "jquery/dist/jquery",
-      //Tether: "tether",
-      //"window.Tether": "tether",
-      "_": "lodash",
-      "window._": "lodash",
-      //Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
-      //Button: "exports-loader?Button!bootstrap/js/dist/button",
+      $: "jquery",
+      jQuery: "jquery",
+      "window.jQuery": "jquery",
     })
-  ]
+  ],
+  optimization: {
+    runtimeChunk: { name: 'vendor' },
+    splitChunks: {
+      chunks: "initial",
+      cacheGroups: {
+        default: false,
+        vendors: {
+          chunks: "initial",
+          test: /[\\/]node_modules[\\/]/,
+          priority: -10,
+          name: "vendor",
+        },
+      },
+    },
+  },
 };
 
 if (production) {
   config.plugins.push(
-    new webpack.optimize.CommonsChunkPlugin({name: 'vendor', filename: 'vendor-[chunkhash].js'}),
-    new webpack.optimize.UglifyJsPlugin({
-      compressor: { warnings: false },
-      sourceMap: false
-    }),
     new webpack.DefinePlugin({ // <--key to reduce React's size
       'process.env': { NODE_ENV: JSON.stringify('production') }
     }),
-    new webpack.optimize.ModuleConcatenationPlugin(),
     new CompressionPlugin({
         asset: "[path].gz",
         algorithm: "gzip",
         test: /\.js$|\.css$/,
         threshold: 4096,
         minRatio: 0.8
     })
   );
+  config.output.publicPath = '/webpack/';
 } else {
   config.plugins.push(
-    new webpack.optimize.CommonsChunkPlugin({name: 'vendor', filename: 'vendor.js'}),
     new webpack.NamedModulesPlugin()
   )
 
   config.devServer = {
     port: devServerPort,
     disableHostCheck: true,
     headers: { 'Access-Control-Allow-Origin': '*' },
   };
   config.output.publicPath = 'http://' + host + ':' + devServerPort + '/webpack/';
+  // Source maps
   config.devtool = 'source-map';
 }
 
 module.exports = config;