fix(webpack): fix compatibility with latest webpack

satya164 · Oct 30, 2016 · 08fe9fd · 08fe9fd
1 parent 2d2ae53
commit 08fe9fd
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -71,7 +71,7 @@
     "sass-loader": "^4.0.2",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
-    "webpack": "^2.1.0-beta.22",
+    "webpack": "2.1.0-beta.25",
     "yargs": "^5.0.0"
   },
   "devDependencies": {

diff --git a/src/configure-bundler.js b/src/configure-bundler.js
@@ -22,7 +22,7 @@ export default async function(options) {
 
     return webpack(configure({
         context: WORKINGDIR,
-        devtool: options.devtool,
+        devtool: options.devtool ? options.devtool : false,
         production: options.production,
         output: {
             path: WORKINGDIR,

diff --git a/src/configure-webpack.js b/src/configure-webpack.js
@@ -8,20 +8,25 @@ const BABEL_LOADER = 'babel-loader?' + JSON.stringify(babelrc);
 const CSS_LOADER = 'css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]';
 const SASS_LOADER = 'sass-loader?sourceMap';
 const LESS_LOADER = 'less-loader?sourceMap';
-const STYLE_LOADERS = [ 'style-loader', CSS_LOADER, 'postcss-loader' ];
-
-export const extensions = [ '', '.web.js', '.js' ];
+const STYLE_LOADERS = [
+    'style-loader',
+    CSS_LOADER,
+    {
+        loader: 'postcss-loader',
+        options: {
+            plugins() {
+                return [ autoprefixer ];
+            },
+        },
+    }
+];
 
 export default (options) => ({
     context: options.context,
     entry: options.entry,
     output: options.output,
     devtool: options.devtool,
 
-    postcss() {
-        return [ autoprefixer ];
-    },
-
     plugins: [
         new webpack.NoErrorsPlugin(),
         new webpack.DefinePlugin({
@@ -44,7 +49,7 @@ export default (options) => ({
     .concat(options.plugins || []),
 
     module: {
-        loaders: [
+        rules: [
             {
                 test: /\.js$/,
                 exclude: /node_modules/,
@@ -56,21 +61,21 @@ export default (options) => ({
             },
             {
                 test: /\.css$/,
-                loaders: STYLE_LOADERS,
+                use: STYLE_LOADERS,
             },
             {
                 test: /\.less$/,
-                loaders: [ ...STYLE_LOADERS, LESS_LOADER ],
+                use: [ ...STYLE_LOADERS, LESS_LOADER ],
             },
             {
                 test: /\.scss$/,
-                loaders: [ ...STYLE_LOADERS, SASS_LOADER ],
+                use: [ ...STYLE_LOADERS, SASS_LOADER ],
             },
             {
                 test: /\.(gif|jpg|png|webp|svg)$/,
                 loader: 'url?limit=25000',
             },
-        ]
+        ],
     },
 
     resolveLoader: {
@@ -81,7 +86,6 @@ export default (options) => ({
     },
 
     resolve: {
-        extensions,
         modules: [
             path.join(CURRENTDIR, 'node_modules'),
             path.resolve(options.context, 'node_modules'),

diff --git a/src/quik-middleware-hmr.js b/src/quik-middleware-hmr.js
@@ -37,7 +37,7 @@ export default function(options) {
         ]
     });
 
-    const loaders = config.module.loaders;
+    const loaders = config.module.rules;
 
     for (const loader of loaders) {
         if (loader.loader && loader.loader.indexOf('babel') > -1) {

diff --git a/src/quik-middleware-js.js b/src/quik-middleware-js.js
@@ -4,14 +4,12 @@ import readFileAsync from './read-file-async';
 import runCompilerAsync from './run-compiler-async';
 import formatError from './format-error';
 import bundler from './configure-bundler';
-import { extensions } from './configure-webpack';
-
 const CONTENT_TYPE = 'application/javascript';
 
 export default function(options) {
     const WORKINGDIR = options.root;
 
-    const test = file => extensions.some(ext => ext && file.endsWith(ext));
+    const test = file => file.endsWith('.js');
 
     return function *(next) {
         if (this.method === 'GET' && this.accepts(CONTENT_TYPE) && test(this.path) && this.query.transpile !== 'false') {

diff --git a/test/hmr.test.js b/test/hmr.test.js
@@ -7,6 +7,7 @@ import EventSource from 'eventsource';
 import server from '../dist/server';
 
 test.cb('should rebuild on changes', t => {
+    const SYNC = 'sync';
     const BUILDING = 'building';
     const BUILT = 'built';
     const HEARTBEAT = '💓';
@@ -32,7 +33,7 @@ test.cb('should rebuild on changes', t => {
         });
     }
 
-    t.plan(14);
+    t.plan(15);
 
     const hmr = new EventSource('http://localhost:3005/__webpack_hmr');
 
@@ -45,13 +46,13 @@ test.cb('should rebuild on changes', t => {
     };
 
     let i = 0;
-    let action = BUILDING;
+    let action = SYNC;
 
     hmr.onmessage = message => {
         /* eslint-disable ava/no-statement-after-end */
         const data = message.data;
 
-        if (i === 6) {
+        if (i === 7) {
             t.deepEqual(data, HEARTBEAT, 'should recieve heartbeat');
 
             hmr.close();
@@ -74,6 +75,9 @@ test.cb('should rebuild on changes', t => {
             }
 
             switch (parsed.action) {
+            case SYNC:
+                action = BUILDING;
+                break;
             case BUILDING:
                 action = BUILT;
                 break;