Working webpack configs for both dev and prod builds

.eslintrc.js

@@ -0,0 +1,39 @@
+// http://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+  },
+  extends: 'airbnb-base',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // check if imports actually resolve
+  'settings': {
+    'import/resolver': {
+      'webpack': {
+        'config': 'build/webpack.base.conf.js'
+      }
+    }
+  },
+  // add your custom rules here
+  'rules': {
+    // don't require .vue extension when importing
+    'import/extensions': ['error', 'always', {
+      'js': 'never',
+      'vue': 'never'
+    }],
+    // allow optionalDependencies
+    'import/no-extraneous-dependencies': ['error', {
+      'optionalDependencies': ['test/unit/index.js']
+    }],
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+  }
+};

build/webpack.base.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const config = require('../config');
+const webpack = require('webpack');
 
 const defaults = {
   __DEV__: JSON.stringify(config.isDev),
@@ -20,7 +21,6 @@ const webpackConfig = {
     extensions: ['.js', '.vue', '.json'],
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
-      '@': resolve('src')
     }
   },
   plugins: [
@@ -53,7 +53,7 @@ const webpackConfig = {
             'scss': 'vue-style-loader!css-loader!sass-loader',
             'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
           },
-          extractCSS: isProd
+          extractCSS: config.isProd
           // other vue-loader options go here
         }
       },
@@ -62,23 +62,23 @@ const webpackConfig = {
         loader: 'url-loader',
         options: {
           limit: 10000,
-          name: path.posix.join(config.assetsSubDirectory, 'img/[name].[hash:7].[ext]')
+          name: './img/[name].[hash:7].[ext]'
         }
       },
       {
         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
         loader: 'url-loader',
         options: {
           limit: 10000,
-          name: path.posix.join(config.assetsSubDirectory, 'media/[name].[hash:7].[ext]')
+          name: './media/[name].[hash:7].[ext]'
         }
       },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
         loader: 'url-loader',
         options: {
           limit: 10000,
-          name: path.posix.join(config.assetsSubDirectory, 'fonts/[name].[hash:7].[ext]')
+          name: './fonts/[name].[hash:7].[ext]'
         }
       }
     ]

build/webpack.development.js

@@ -1,4 +1,4 @@
-const config = require('./config');
+const config = require('../config');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
@@ -10,9 +10,9 @@ const webpackConfig = {
     noInfo: true,
   },
   performance: {
-    hints: true
+    hints: false
   },
-  modules: {
+  module: {
     rules: [
       {
         test: /\.scss$/,

build/webpack.production.js

@@ -1,4 +1,5 @@
-const config = require('./config');
+const path = require('path');
+const config = require('../config');
 const webpack = require('webpack');
 
 const CopyWebpackPlugin = require('copy-webpack-plugin');
@@ -9,94 +10,93 @@ const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
 
 module.exports = {
   devtool: '#source-map',
-  output: {
-    path: config.prod.assetsRoot,
-    filename: utils.assetsPath('js/[name].[chunkhash].js'),
-    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
-  },
-  modules: {
+  module: {
     rules: [
       {
         test: /\.scss$/i,
-        loader: ExtractTextPlugin.extract({ loader: ['css-loader?importLoaders=1','sass-loader'] })
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          // resolve-url-loader may be chained before sass-loader if necessary
+          use: ['css-loader', 'sass-loader'],
+        }),
       },
       {
         test: /\.css$/i,
-        loader: ExtractTextPlugin.extract({ loader: ['css-loader?importLoaders=1'] })
-      }
-    ]
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: 'css-loader',
+        }),
+      },
+    ],
   },
   plugins: [
     new webpack.optimize.UglifyJsPlugin({
       sourceMap: true,
       output: {
-        comments: false
+        comments: false,
       },
       debug: false,
       compress: {
         warnings: false,
-        dead_code: true
-      }
+        dead_code: true,
+      },
     }),
     new LodashModuleReplacementPlugin(),
     // extract css into its own file
     new ExtractTextPlugin({
-      filename: utils.assetsPath('css/[name].[contenthash].css')
+      filename: './css/[name].[contenthash].css',
     }),
     // Compress extracted CSS. We are using this plugin so that possible
     // duplicated CSS from different components can be deduped.
     new OptimizeCSSPlugin({
       cssProcessorOptions: {
-        safe: true
-      }
+        safe: true,
+      },
     }),
     // generate dist index.html with correct asset hash for caching.
     // you can customize output by editing /index.html
     // see https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
-      filename: config.prod.index,
+      filename: config.index,
       template: 'index.html',
       inject: true,
       minify: {
         removeComments: true,
         collapseWhitespace: true,
-        removeAttributeQuotes: true
+        removeAttributeQuotes: true,
         // more options:
         // https://github.com/kangax/html-minifier#options-quick-reference
       },
       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-      chunksSortMode: 'dependency'
+      chunksSortMode: 'dependency',
     }),
     // split vendor js into its own file
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
-      minChunks: function (module, count) {
+      minChunks(module) {
         // any required modules inside node_modules are extracted to vendor
         return (
-          module.resource &&
-          /\.js$/.test(module.resource) &&
-          module.resource.indexOf(
-            path.join(__dirname, '../node_modules')
-          ) === 0
+          module.resource && /\.js$/.test(module.resource) &&
+          module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0
         );
-      }
+      },
     }),
     // extract webpack runtime and module manifest to its own file in order to
     // prevent vendor hash from being updated whenever app bundle is updated
     new webpack.optimize.CommonsChunkPlugin({
       name: 'manifest',
-      chunks: ['vendor']
+      chunks: ['vendor'],
     }),
     // copy custom static assets
     new CopyWebpackPlugin([
       {
-        from: path.resolve(__dirname, '../static'),
-        to: config.prod.assetsSubDirectory,
-        ignore: ['.*']
-      }
+        from: path.resolve(__dirname, '../src/assets'),
+        to: config.assetsSubDirectory,
+        ignore: ['.*'],
+      },
     ]),
     new webpack.LoaderOptionsPlugin({
-      minimize: true
-    })
-  ]
-};
+      minimize: true,
+    }),
+  ],
+};

config/config.app.js

@@ -1,3 +1,3 @@
-export default {
+module.exports = {
   appName: 'Some App Specific Mode',
 };

config/config.base.js

@@ -1,13 +1,12 @@
 const API_URL = '//app.example.com/api';
 const API_VERSION = '1.0';
 const BASE_URL = API_URL + '/' + API_VERSION;
-const APP_URL = window.location.origin;
 
-export function getURL(url) {
+exports.getURL = function (url) {
   return BASE_URL + url;
-}
+};
 
-export default {
+module.exports = {
   appName: 'Default App',
   debug: false,
   sessionName: 'session_id',

config/config.development.js

@@ -1,6 +1,6 @@
-var path = require('path');
+const path = require('path');
 
-export default {
+module.exports = {
   appName: 'Dev App',
   debug: true,
   index: path.resolve(__dirname, '../dist/index.html'),

config/config.production.js

@@ -1,6 +1,6 @@
-var path = require('path');
+const path = require('path');
 
-export default {
+module.exports = {
   appName: 'Prod App',
   index: path.resolve(__dirname, '../dist/index.html'),
   assetsRoot: path.resolve(__dirname, '../dist'),