[WIP] - upgrade webpack

karma.conf.js

@@ -16,10 +16,10 @@ module.exports = function (config) {
     frameworks: ['jasmine'], //use jasmine as framework
     files: [
       path.join(__dirname, 'node_modules', 'phantomjs-polyfill', 'bind-polyfill.js'), // To enable PhantomJS to render React components
-      'webpack.tests.js' //test files
+      './src/__test__/**/*' //test files
     ],
     preprocessors: {
-      'webpack.tests.js': ['webpack', 'sourcemap']
+      './src/__test__/**/*': ['webpack', 'sourcemap']
     }
 
   })
@@ -37,10 +37,11 @@ module.exports = function (config) {
   if(needsCoverage){
     webpack = webpack.merge({
       module:{
-        postLoaders: [{
+        loaders: [{
           test: /\.(js|tsx?)/,
           exclude: /(test|node_modules|bower_components)/,
-          loader: 'istanbul-instrumenter'
+          loader: 'istanbul-instrumenter',
+          enforce: "post"
         }]
       }
     })

package.json

@@ -25,7 +25,7 @@
   },
   "typings": "lib/src/index.d.ts",
   "scripts": {
-    "test": "./node_modules/.bin/karma start --single-run --reporters progress,junit,coverage",
+    "test": "./node_modules/.bin/karma start --single-run --reporters progress,junit,coverage --display-error-details",
     "test:watch": "./node_modules/.bin/karma start karma.conf.js --auto-watch",
     "build": "./node_modules/.bin/tsc; ./node_modules/.bin/webpack; rm release/ignore.js",
     "build:watch": "./node_modules/.bin/tsc -w",
@@ -87,7 +87,7 @@
     "ejs": "^2.4.1",
     "enzyme": "^2.0.0",
     "express": "^4.13.4",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "2",
     "file-loader": "^0.8.5",
     "html-webpack-plugin": "^2.9.0",
     "imports-loader": "^0.6.5",
@@ -125,7 +125,7 @@
     "ts-loader": "^1.3.3",
     "ts-node": "^0.5.5",
     "typescript": "^2.1.4",
-    "webpack": "^1.12.14",
+    "webpack": "2",
     "webpack-config": "^4.0.0",
     "webpack-hot-middleware": "^2.9.1",
     "xenon": "^0.1.5"

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')
+  ]
+}

src/__test__/test_index.js

@@ -0,0 +1 @@
+// require(".");

webpack.config.js

@@ -4,6 +4,18 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const copyrightBanner = require("fs").readFileSync("./COPYRIGHT", "utf-8")
 const autoprefixer = require('autoprefixer')
 
+var loaders = [
+  {
+    loader: 'css-loader',
+  },
+  {
+    loader: 'postcss-loader',
+  },
+  {
+    loader: 'sass-loader',
+  },
+];
+
 module.exports = {
   entry: {
     "ignore":['./theming/index.ts'],
@@ -15,19 +27,16 @@ module.exports = {
     library:["Searchkit"],
     libraryTarget:"umd",
     publicPath: '',
-    css: 'theme.css'
+    // css: 'theme.css'
   },
   resolve: {
-    extensions:[".js", ".ts", ".tsx","", ".webpack.js", ".web.js", ".scss"]
-  },
-  postcss: function () {
-    return [autoprefixer]
+    extensions:[".js", ".ts", ".tsx", ".webpack.js", ".web.js", ".scss"]
   },
+  devtool: "source-map",
   plugins: [
-    new webpack.BannerPlugin(copyrightBanner, {entryOnly:true}),
+    new webpack.BannerPlugin({banner: copyrightBanner, entryOnly:true}),
     new webpack.optimize.DedupePlugin(),
-    new webpack.optimize.OccurenceOrderPlugin(),
-    new ExtractTextPlugin("theme.css", {allChunks:true}),
+    new ExtractTextPlugin({filename: "theme.css", allChunks:true}),
     new webpack.optimize.UglifyJsPlugin({
       mangle: {
         except: ['require', 'export', '$super']
@@ -50,15 +59,18 @@ module.exports = {
     "react-dom":"ReactDOM"
   },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.tsx?$/,
-        loaders: ['ts'],
+        loaders: ['ts-loader'],
         include: [path.join(__dirname, 'src'),path.join(__dirname, 'theming')]
       },
       {
         test: /\.scss$/,
-        loader: ExtractTextPlugin.extract(require.resolve("style-loader"),require.resolve("css-loader")+"!"+require.resolve("postcss-loader")+"!"+require.resolve("sass-loader")),
+        loader: ExtractTextPlugin.extract({
+          fallbackLoader: 'style-loader',
+          loader: loaders,
+        }),
         include: path.join(__dirname, 'theming')
       },
       {

webpack.test.config.js

@@ -3,11 +3,12 @@ var webpack = require('webpack');
 
 module.exports = {
   devtool:"inline-source-map",
+  entry: "./src/__test__/test_index.js",
   output: {
     path: path.join(__dirname, 'dist')
   },
   resolve: {
-    extensions:[".js", ".ts", ".tsx","", ".webpack.js", ".web.js"],
+    extensions:[".js", ".ts", ".tsx", ".webpack.js", ".web.js", ".tests.js"],
     alias: {
       sinon: 'sinon/pkg/sinon'
     }
@@ -21,10 +22,10 @@ module.exports = {
     'react/addons': true
   },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.tsx?$/,
-        loader: 'ts-loader?instance=jsx',
+        loader: 'ts-loader',
         include: path.join(__dirname, "src")
       },
       { test: /\.json$/, loader: 'json-loader' },
@@ -43,6 +44,6 @@ module.exports = {
         include: path.join(__dirname, 'src')
       }
     ],
-    node : { fs: 'empty' }
+    // node : { fs: 'empty' }
   }
 };