move assets found in node_modules/ to dist/vendor; simpler assets/config.json (#1697)

assets/config.json

@@ -1,5 +1,4 @@
 {
-  "context": "assets",
   "entry": {
     "main": [
       "./scripts/main.js",
@@ -9,10 +8,6 @@
       "./scripts/customizer.js"
     ]
   },
-  "output": {
-    "path": "dist",
-    "publicPath": "/app/themes/sage/dist/"
-  },
-  "devUrl": "http://example.dev",
-  "devPort": 3000
+  "publicPath": "/app/themes/sage",
+  "devUrl": "http://example.dev"
 }

webpack.config.js

@@ -17,6 +17,8 @@ var config = require('./assets/config');
 var scriptsFilename = (argv.release) ? 'scripts/[name]_[hash].js' : 'scripts/[name].js',
     stylesFilename = (argv.release) ? 'styles/[name]_[hash].css' : 'styles/[name].css',
     sourceMapQueryStr = (argv.release) ? '-sourceMap' : '+sourceMap',
+    assets = 'assets/',
+    dist = 'dist/',
     jsLoader,
     webpackConfig;
 
@@ -83,18 +85,18 @@ var addHotMiddleware = function (entry) {
 };
 
 webpackConfig = {
-  context: path.resolve(config.context),
+  context: path.resolve(assets),
   entry: config.entry,
   output: {
-    path: path.join(__dirname, config.output.path),
-    publicPath: config.output.publicPath,
+    path: path.join(__dirname, dist),
+    publicPath: path.join(config.publicPath, dist),
     filename: scriptsFilename
   },
   module: {
     preLoaders: [
       {
         test: /\.js?$/,
-        include: path.resolve('assets'),
+        include: path.resolve(assets),
         loader: 'eslint'
       }
     ],
@@ -102,6 +104,7 @@ webpackConfig = {
       jsLoader,
       {
         test: /\.css$/,
+        include: path.resolve(assets),
         loader: ExtractTextPlugin.extract('style', [
           'css?' + sourceMapQueryStr,
           'postcss'
@@ -109,6 +112,7 @@ webpackConfig = {
       },
       {
         test: /\.scss$/,
+        include: path.resolve(assets),
         loader: ExtractTextPlugin.extract('style', [
           'css?' + sourceMapQueryStr,
           'postcss',
@@ -117,13 +121,14 @@ webpackConfig = {
         ])
       },
       {
-        test: /\.(png|jpg|jpeg|gif)(\?.*)?$/,
+        test: /\.(png|jpg|jpeg|gif|svg)(\?.*)?$/,
+        include: path.resolve(assets),
         loaders: [
           'file?' + qs.stringify({
-            name: 'images/[name]_[md5:hash:hex:8].[ext]'
+            name: '[path][name].[ext]'
           }),
           'image-webpack?' + JSON.stringify({
-            bypassOnDebug:true,
+            bypassOnDebug: true,
             progressive: true,
             optimizationLevel: 7,
             interlaced: true,
@@ -139,17 +144,27 @@ webpackConfig = {
         ]
       },
       {
-        test: /\.(ttf|eot|svg)(\?.*)?$/,
+        test: /\.(ttf|eot)(\?.*)?$/,
+        include: path.resolve(assets),
         loader: 'file?' + qs.stringify({
-          name: 'fonts/[name]_[md5:hash:hex:8].[ext]'
+          name: '[path][name]_[md5:hash:hex:8].[ext]'
         })
       },
       {
         test: /\.woff(2)?(\?.*)?$/,
+        include: path.resolve(assets),
         loader: 'url?' + qs.stringify({
           limit: 10000,
           mimetype: "application/font-woff",
-          name: "fonts/[name]_[md5:hash:hex:8].[ext]"
+          name: "[path][name]_[md5:hash:hex:8].[ext]"
+        })
+      },
+      // Use file-loader for node_modules/ assets
+      {
+        test: /\.(ttf|eot|woff(2)?|png|jpg|jpeg|gif|svg)(\?.*)?$/,
+        include: /node_modules/,
+        loader: 'file?' + qs.stringify({
+          name: 'vendor/[name]_[md5:hash:hex:8].[ext]'
         })
       }
     ]
@@ -165,7 +180,7 @@ webpackConfig = {
     jquery: 'jQuery'
   },
   plugins: [
-    new Clean([config.output.path]),
+    new Clean([dist]),
     new ExtractTextPlugin(stylesFilename, {
       allChunks: true,
       disable: (argv.watch === true) // '--watch' disable ExtractTextPlugin
@@ -210,7 +225,7 @@ if (argv.watch) {
 // '--release' to push additional plugins to webpackConfig
 if (argv.release) {
   webpackConfig.plugins.push(new AssetsPlugin({
-    path: path.join(__dirname, config.output.path),
+    path: path.join(__dirname, dist),
     filename: 'assets.json',
     fullPath: false,
     processOutput: assetsPluginProcessOutput