initial webpack2 migration (SimulatedGREG#72) [skip ci]

SimulatedGREG · SimulatedGREG · commit def927aa8625 · 2016-11-30T15:32:13.000-06:00
diff --git a/template/.babelrc b/template/.babelrc
@@ -1,4 +1,16 @@
 {
+{{#if_eq vueVersion '2.x'}}
+  "env": {
+    "testing": {
+      "presets": ["es2015", "stage-0"]
+    }
+  },
+  "presets": [
+    ["es2015", { "modules": false }],
+    "stage-0"
+  ],
+{{else}}
   "presets": ["es2015", "stage-0"],
+{{/if_eq}}
   "plugins": ["transform-runtime"]
 }
diff --git a/template/package.json b/template/package.json
@@ -22,7 +22,7 @@
     "test": "{{#unit}}npm run unit{{/unit}}{{#unit}}{{#e2e}} && {{/e2e}}{{/unit}}{{#e2e}}npm run e2e{{/e2e}}",
     {{/testing}}
     {{#if unit}}
-    "unit": "karma start test/unit/karma.conf.js",
+    "unit": "cross-env BABEL_ENV=testing karma start test/unit/karma.conf.js",
     {{/if}}
     {{#isEnabled plugins 'vue-router'}}
     "vue:route": "node tasks/vue/route.js",
@@ -65,7 +65,7 @@
     "eslint-plugin-import": "^1.8.1",
     {{/if_eq}}
     {{/eslint}}
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "^2.0.0-beta",
     "file-loader": "^0.8.5",
     "html-webpack-plugin": "^2.16.1",
     "json-loader": "^0.5.4",
@@ -98,8 +98,8 @@
     "vue-html-loader": "^1.2.2",
     {{ver vueVersion 'loader'}}
     "vue-style-loader": "^1.0.0",
-    "webpack": "^1.13.0",
-    "webpack-dev-server": "^1.14.1"
+    "webpack": "^2.1.0-beta.25",
+    "webpack-dev-server": "^2.1.0-beta.0"
   },
   "dependencies": {}
 }
diff --git a/template/test/e2e/index.js b/template/test/e2e/index.js
@@ -1,5 +1,10 @@
 'use strict'
+{{#if_eq vueVersion '2.x'}}
 
+// Set BABEL_ENV to use proper preset config
+process.env.BABEL_ENV = 'testing'
+
+{{/if_eq}}
 // Enable use of es2015 on required files
 require('babel-register')({
   ignore: /node_modules/
diff --git a/template/test/unit/karma.conf.js b/template/test/unit/karma.conf.js
@@ -9,11 +9,13 @@ const projectRoot = path.resolve(__dirname, '../../app')
 
 let webpackConfig = merge(baseConfig, {
   devtool: '#inline-source-map',
+{{#if_eq vueVersion '1.x'}}
   vue: {
     loaders: {
       js: 'isparta'
     }
   },
+{{/if_eq}}
   plugins: [
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': '"testing"'
@@ -25,20 +27,35 @@ let webpackConfig = merge(baseConfig, {
 delete webpackConfig.entry
 
 // make sure isparta loader is applied before eslint
+{{#if_eq vueVersion '2.x'}}
+webpackConfig.module.rules.unshift({
+  test: /\.js$/,
+  loader: 'isparta-loader',
+  enforce: 'pre',
+  include: path.resolve(projectRoot, 'src')
+})
+{{else}}
 webpackConfig.module.preLoaders = webpackConfig.module.preLoaders || []
 webpackConfig.module.preLoaders.unshift({
   test: /\.js$/,
   loader: 'isparta',
   include: path.resolve(projectRoot, 'src')
 })
+{{/if_eq}}
 
 // only apply babel for test files when using isparta
-webpackConfig.module.loaders.some((loader, i) => {
-  if (loader.loader === 'babel') {
+webpackConfig.module.{{#if_eq vueVersion '2.x'}}rules{{else}}loaders{{/if_eq}}.some(loader => {
+  if (loader.loader === 'babel-loader') {
     loader.include = path.resolve(projectRoot, '../test/unit')
     return true
   }
 })
+{{#if_eq vueVersion '2.x'}}
+
+// apply vue option to apply isparta-loader on js
+webpackConfig.module.rules
+  .find(({ loader }) => loader === 'vue-loader').options.loaders.js = 'isparta-loader'
+{{/if_eq}}
 
 module.exports = config => {
   config.set({
diff --git a/template/webpack.config.js b/template/webpack.config.js
@@ -10,22 +10,29 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 let config = {
   devtool: '#eval-source-map',
-  {{#if eslint}}
+  {{#if eslint}}{{#if_eq vueVersion '1.x'}}
   eslint: {
     formatter: require('eslint-friendly-formatter')
   },
-  {{/if}}
+  {{/if_eq}}{{/if}}
   entry: {
     build: path.join(__dirname, 'app/src/main.js')
   },
   module: {
-{{#if eslint}}
+{{#if eslint}}{{#if_eq vueVersion '1.x'}}
     preLoaders: [],
-{{/if}}
-    loaders: [
+{{/if_eq}}{{/if}}
+    {{#if_eq vueVersion '1.x'}}loaders{{else}}rules{{/if_eq}}: [
       {
         test: /\.css$/,
+{{#if_eq vueVersion '1.x'}}
         loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
+{{else}}
+        loader: ExtractTextPlugin.extract({
+          fallbackLoader: 'style-loader',
+          loader: 'css-loader'
+        })
+{{/if_eq}}
       },
       {
         test: /\.html$/,
@@ -42,7 +49,13 @@ let config = {
       },
       {
         test: /\.vue$/,
-        loader: 'vue-loader'
+        loader: 'vue-loader'{{#if_eq vueVersion '2.x'}},
+        options: {
+          loaders: {
+            sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
+            scss: 'vue-style-loader!css-loader!sass-loader'
+          }
+        }{{/if_eq}}
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
@@ -80,13 +93,23 @@ let config = {
       'components': path.join(__dirname, 'app/src/components'),
       'src': path.join(__dirname, 'app/src')
     },
-    extensions: ['', '.js', '.vue', '.json', '.css'],
+    extensions: ['.js', '.vue', '.json', '.css'],
+{{#if_eq vueVersion '1.x'}}
     fallback: [path.join(__dirname, 'app/node_modules')]
+{{else}}
+    modules: [
+      path.join(__dirname, 'app/node_modules'),
+      path.join(__dirname, 'node_modules')
+    ]
+{{/if_eq}}
   },
+{{#if_eq vueVersion '1.x'}}
   resolveLoader: {
     root: path.join(__dirname, 'node_modules')
   },
+{{/if_eq}}
   target: 'electron-renderer',
+{{#if_eq vueVersion '1.x'}}
   vue: {
     {{#if_eq vueVersion '1.x'}}
     autoprefixer: {
@@ -98,6 +121,7 @@ let config = {
       scss: 'vue-style-loader!css-loader!sass-loader'
     }
   }
+{{/if_eq}}
 }
 
 {{#if eslint}}
@@ -106,17 +130,25 @@ if (process.env.NODE_ENV !== 'production') {
    * Apply ESLint
    */
   if (settings.eslint) {
+{{#if_eq vueVersion '1.x'}}
     config.module.preLoaders.push(
       {
-        test: /\.js$/,
+        test: /\.(js|vue)$/,
         loader: 'eslint-loader',
         exclude: /node_modules/
-      },
+      }
+    )
+{{else}}
+    config.module.rules.push(
       {
-        test: /\.vue$/,
-        loader: 'eslint-loader'
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        exclude: /node_modules/,
+        options: { formatter: require('eslint-friendly-formatter') }
       }
     )
+{{/if_eq}}
   }
 }
 
@@ -131,7 +163,13 @@ if (process.env.NODE_ENV === 'production') {
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': '"production"'
     }),
+{{#if_eq vueVersion '1.x'}}
     new webpack.optimize.OccurenceOrderPlugin(),
+{{else}}
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    }),
+{{/if_eq}}
     new webpack.optimize.UglifyJsPlugin({
       compress: {
         warnings: false
