Update webpack

.gitignore

@@ -5,3 +5,4 @@ lib
 build
 package-lock.json
 yarn.lock
+.vscode

examples/web-app-react/simple/package.json

@@ -6,7 +6,7 @@
   "author": "Schibsted",
   "license": "MIT",
   "scripts": {
-    "dev": "roc dev --runtime-applicationName 'Simple Example'"
+    "dev": "roc dev"
   },
   "dependencies": {
     "roc-package-web-app-react": "^2.0.0"

examples/web-app-react/simple/roc.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    settings: {
+        runtime: {
+            applicationName: 'Simple Example',
+        },
+        build: {
+            routes: 'routes.js',
+        },
+    },
+};

package.json

@@ -14,7 +14,7 @@
     "eslint-plugin-jsx-a11y": "2.2.1",
     "eslint-plugin-react": "6.2.0",
     "roc": "^1.0.0-rc.23",
-    "roc-plugin-repo": "0.0.25",
+    "roc-plugin-repo": "0.0.28",
     "roc-plugin-repo-roc": "0.0.1"
   }
 }

packages/roc-package-web-app-react-dev/src/webpack/index.js

@@ -138,7 +138,7 @@ export default ({
         })
     );
 
-    newWebpackConfig.resolveLoader.root.push(join(__dirname, '..', '..', 'node_modules'));
+    newWebpackConfig.resolveLoader.modules.push(join(__dirname, '..', '..', 'node_modules'));
 
     return newWebpackConfig;
 };

packages/roc-package-webpack-dev/package.json

@@ -38,8 +38,8 @@
     "roc": "^1.0.0-rc.23",
     "roc-abstract-package-base-dev": "^1.0.0",
     "roc-plugin-babel": "^1.0.0",
-    "webpack": "~1.12.2",
-    "webpack-merge": "0.14.0"
+    "webpack": "~3.10.0",
+    "webpack-merge": "~4.1.1"
   },
   "roc": {
     "packages": [

packages/roc-package-webpack-dev/src/actions/build.js

@@ -118,7 +118,13 @@ export default ({ context: { verbose, config: { settings } } }) => (targets) =>
 
     const promises = validTargets.map((target) => {
         const babelConfig = invokeHook('babel-config', target);
-        const webpackConfig = invokeHook('build-webpack', target, babelConfig);
+        /* eslint-disable no-unused-vars */
+        const { rocMetaInfo: _, ...webpackConfig } = invokeHook(
+            'build-webpack',
+            target,
+            babelConfig,
+        );
+        /* eslint-enable no-unused-vars */
         return build(webpackConfig, target, settings, verbose);
     });
 

packages/roc-package-webpack-dev/src/actions/dev.js

@@ -31,17 +31,17 @@ const writeStatsFile = (buildPath, scriptPath) =>
         });
     });
 
-const createWatcher = (verbose, settings, target, webpackConfig, watcher) => {
+const createWatcher = (verbose, settings, target, webpackConfig, rocMetaInfo, watcher) => {
     // Resolve directly if we did not get a webpackConfig back
     if (!webpackConfig) {
         return Promise.resolve();
     }
 
-    return cleanPromise(webpackConfig.rocMetaInfo.outputPath)
+    return cleanPromise(rocMetaInfo.outputPath)
         .then(async function watch() {
             const compiler = webpack(webpackConfig);
             await writeStatsFile(webpackConfig.output.path, webpackConfig.output.publicPath +
-                webpackConfig.output.filename.replace(/\[name\]/, webpackConfig.rocMetaInfo.outputName));
+                webpackConfig.output.filename.replace(/\[name\]/, rocMetaInfo.outputName));
 
             if (!watcher[target]) {
                 return Promise.resolve();
@@ -90,7 +90,11 @@ export default ({ context: { verbose, config: { settings } } }) => (targets) =>
     // Build each one in order
     return Promise.all(targets.map(async function builders(target) {
         const babelConfig = invokeHook('babel-config', target);
-        const webpackConfig = invokeHook('build-webpack', target, babelConfig);
-        return await createWatcher(verbose, newSettings, target, webpackConfig, watchers);
+        const { rocMetaInfo, ...webpackConfig } = invokeHook(
+            'build-webpack',
+            target,
+            babelConfig,
+        );
+        return await createWatcher(verbose, newSettings, target, webpackConfig, rocMetaInfo, watchers);
     }));
 };

packages/roc-package-webpack-dev/src/roc/index.js

@@ -28,7 +28,7 @@ export default {
             const targets = invokeHook('get-webpack-targets');
             if (targets.indexOf(target) !== -1) {
                 babelConfig.presets.push(
-                    require.resolve('babel-preset-es2015'),
+                    [require.resolve('babel-preset-es2015'), { modules: false }],
                     require.resolve('babel-preset-stage-1')
                 );
                 babelConfig.plugins.push(

packages/roc-package-webpack-dev/src/webpack/index.js

@@ -83,44 +83,37 @@ export default () => (target, babelConfig) => (webpackConfig = {}) => {
 
     // Base
     newWebpackConfig.module = {
-        preLoaders: [],
-        loaders: [],
+        rules: [],
     };
 
     // JS LOADER
     const jsLoader = {
-        id: 'babel',
         test: /\.js$/,
-        loader: require.resolve('babel-loader'),
-        query: {
-            ...babelConfig,
-            cacheDirectory: true,
-        },
         include: runThroughBabel,
+        use: [{
+            loader: require.resolve('babel-loader'),
+            options: {
+                ...babelConfig,
+                cacheDirectory: true,
+            },
+        }],
     };
 
-    newWebpackConfig.module.loaders.push(jsLoader);
-
-    // JSON LOADER
-    const jsonLoader = {
-        test: /\.json$/,
-        loader: require.resolve('json-loader'),
-    };
-
-    newWebpackConfig.module.loaders.push(jsonLoader);
+    newWebpackConfig.module.rules.push(jsLoader);
 
     /**
     * Resolve
     */
     newWebpackConfig.resolve = {
-        fallback: [],
-        extensions: ['', '.js'],
+        extensions: ['.js'],
+        modules: ['node_modules'],
+        alias: {},
     };
 
     newWebpackConfig.resolveLoader = {
-        root: [
-            join(__dirname, '..', '..', 'node_modules'),
-        ],
+        modules: ['node_modules', join(__dirname, '..', '..', 'node_modules')],
+        extensions: ['.js', '.json'],
+        mainFields: ['loader', 'main'],
     };
 
     /**
@@ -147,7 +140,7 @@ export default () => (target, babelConfig) => (webpackConfig = {}) => {
 
         newWebpackConfig.plugins.push(
             new webpack.optimize.DedupePlugin(),
-            new webpack.optimize.OccurenceOrderPlugin()
+            new webpack.optimize.OccurrenceOrderPlugin()
         );
     }