Organize webpack config to match as much as possible

templates/VueSpa/webpack.config.js

@@ -1,13 +1,13 @@
 const path = require('path');
 const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const extractCSS = new ExtractTextPlugin('site.css');
 const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
 const bundleOutputDir = './wwwroot/dist';
 
 module.exports = (env) => {
     const isDevBuild = !(env && env.prod);
 
-    const bundleOutputDir = './wwwroot/dist';
     return [{
         stats: { modules: false },
         context: __dirname,
@@ -17,22 +17,20 @@ module.exports = (env) => {
             rules: [
                 { test: /\.vue\.html$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true' } } },
                 { test: /\.ts$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
-                { test: /\.css$/, use: isDevBuild ? [ 'style-loader', 'css-loader' ] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
+                { test: /\.css$/, use: isDevBuild ? [ 'style-loader', 'css-loader' ] : extractCSS.extract({ use: 'css-loader?minimize' }) },
                 { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
             ]
         },
         output: {
             path: path.join(__dirname, bundleOutputDir),
-            filename: '[name].js',
-            publicPath: '/dist/'
+            publicPath: '/dist/',
+            filename: '[name].js'
         },
         plugins: [
-            new CheckerPlugin(),
-            new webpack.DefinePlugin({
-                'process.env': {
-                    NODE_ENV: JSON.stringify(isDevBuild ? 'development' : 'production')
-                }
+            new webpack.EnvironmentPlugin({
+                NODE_ENV: isDevBuild ? 'development' : 'production'
             }),
+            new CheckerPlugin(),
             new webpack.DllReferencePlugin({
                 context: __dirname,
                 manifest: require('./wwwroot/dist/vendor-manifest.json')
@@ -46,7 +44,7 @@ module.exports = (env) => {
         ] : [
             // Plugins that apply in production builds only
             new webpack.optimize.UglifyJsPlugin(),
-            new ExtractTextPlugin('site.css')
+            extractCSS
         ])
     }];
 };

templates/VueSpa/webpack.config.vendor.js

@@ -1,10 +1,11 @@
 const path = require('path');
 const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const extractCSS = new ExtractTextPlugin('vendor.css');
+const bundleOutputDir = './wwwroot/dist';
 
 module.exports = (env) => {
     const isDevBuild = !(env && env.prod);
-    const extractCSS = new ExtractTextPlugin('vendor.css');
 
     return [{
         stats: { modules: false },
@@ -27,22 +28,27 @@ module.exports = (env) => {
             ]
         },
         output: { 
-            path: path.join(__dirname, 'wwwroot', 'dist'),
+            path: path.join(__dirname, bundleOutputDir),
             publicPath: '/dist/',
             filename: '[name].js',
             library: '[name]_[hash]'
         },
         plugins: [
             extractCSS,
-            new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
-            new webpack.DefinePlugin({
-                'process.env.NODE_ENV': isDevBuild ? '"development"' : '"production"'
+            new webpack.EnvironmentPlugin({
+                NODE_ENV: isDevBuild ? 'development' : 'production'
             }),
+            new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
             new webpack.DllPlugin({
-                path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
+                path: path.join(__dirname, bundleOutputDir, '[name]-manifest.json'),
                 name: '[name]_[hash]'
             })
-        ].concat(isDevBuild ? [] : [
+        ].concat(isDevBuild ? 
+        [
+            // Plugins that apply in development builds only
+            // (none setup for vendors bundle)
+        ] : [
+            // Plugins that apply in production builds only
             new webpack.optimize.UglifyJsPlugin()
         ])
     }];