Added extract-text and tweaked webpack config creation

.gitignore

@@ -1,2 +1,3 @@
 .DS_Store
 node_modules
+dist/

example/build-script.js

@@ -0,0 +1,10 @@
+const { createConfig, createCompiler, createBuildTask } = require('../index');
+
+const webpackConfig = createConfig('./example/main.js', './dist/hello.js', {
+    minify: false,
+    cssInjection: false,
+});
+
+const compiler = createBuildTask(createCompiler(webpackConfig));
+
+compiler();

example/main.js

@@ -0,0 +1,3 @@
+import styles from './styles.scss';
+
+console.log(styles);

example/styles.scss

@@ -0,0 +1,4 @@
+:local .testClass {
+    content: 'testing';
+    background-color: red;
+}

index.js

@@ -2,40 +2,49 @@ const webpack = require('webpack');
 const webpackDevMiddleware = require('webpack-dev-middleware');
 const webpackHotMiddleware = require('webpack-hot-middleware');
 const merge = require('lodash.merge');
-const webpackConfig = require('./webpack.config');
-
-function createOutputConfig(outputOptions) {
-    if (typeof outputOptions === 'string') {
-        return merge({}, webpackConfig.output, {
-            filename: outputOptions,
-        });
-    } else {
-        return merge({}, webpackConfig.output, outputOptions);
-    }
-}
-
-function createConfig(entry, output, minify = false, webpackOptions = {}) {
-    if (!entry) {
-        throw new Error('Entry path argument is required');
+const createWebpackConfig = require('./lib/create-webpack-config');
+
+// function createConfig(entry, output, minify = false, webpackOptions = {}) {
+//     if (!entry) {
+//         throw new Error('Entry path argument is required');
+//     }
+
+//     if (!output) {
+//         throw new Error('Output path argument is required');
+//     }
+
+//     const newWebpackConfig = merge({}, webpackConfig, webpackOptions);
+
+//     newWebpackConfig.entry = typeof entry === 'string' ? [entry] : entry;
+//     newWebpackConfig.output = createOutputConfig(output);
+//     newWebpackConfig.output.libraryTarget = webpackOptions.output ? webpackOptions.output.libraryTarget : webpackConfig.output.libraryTarget;
+
+//     return newWebpackConfig;
+// }
+
+function createConfig(entry, output, options = {}) {
+    if (typeof entry !== 'string') throw new Error('`entry` argument is required');
+    if (typeof output !== 'string') throw new Error('`Output` argument is required');
+    if (typeof options === 'boolean') {
+        console.warn([
+            '---',
+            'DEPRECATION: minify became an object instead of a boolean',
+            '',
+            '   from',
+            '       createConfig("./entry.js", "./dist/out.js", true);',
+            '   to',
+            '       createConfig("./entry.js", "./dist/out.js", { minify: true });',
+            '---',
+        ].join('\n'));
+        options = { minify: options };
     }
 
-    if (!output) {
-        throw new Error('Output path argument is required');
-    }
+    const assertRelative = str => /^\..*/.test(str);
 
-    const newWebpackConfig = merge({}, webpackConfig, webpackOptions);
+    if (!assertRelative(entry)) throw new Error('entry should be relative');
+    if (!assertRelative(output)) throw new Error('output should be relative');
 
-    newWebpackConfig.entry = typeof entry === 'string' ? [entry] : entry;
-    newWebpackConfig.output = createOutputConfig(output);
-    newWebpackConfig.output.libraryTarget = webpackOptions.output ? webpackOptions.output.libraryTarget : webpackConfig.output.libraryTarget;
-
-    newWebpackConfig.plugins = (minify ? [
-        new webpack.optimize.UglifyJsPlugin({
-            compress: { warnings: false },
-        })
-    ] : []);
-
-    return newWebpackConfig;
+    return createWebpackConfig(entry, output, options);
 }
 
 function configWithHot(config) {
@@ -65,20 +74,32 @@ function createHotMiddleware(compiler) {
     return webpackHotMiddleware(compiler);
 }
 
+const webpackCallback = callback => {
+    let cb = callback;
+
+    return (err, stats) => {
+        if (err) throw new Error(err.message || err);
+
+        console.log(stats.toString({
+            chunks: false,
+            colors: true,
+        }));
+
+        if (typeof cb === 'function') {
+            cb();
+            cb = 'done';
+        }
+    }
+}
+
 function createBuildTask(compiler) {
-    return function webpackBuild(done) {
-        compiler.run((err, stats) => {
-            if (err) throw new Error(err);
-            console.log(stats.toString());
-            done();
-        });
+    return function webpackBuild(callback) {
+        compiler.run(webpackCallback(callback));
     }
 }
 
 function createWatchTask(compiler, callback) {
-    compiler.watch({}, (err, stats) => {
-        callback(err, stats);
-    });
+    compiler.watch({}, webpackCallback(callback));
 }
 
 module.exports = {

lib/create-webpack-config.js

@@ -0,0 +1,72 @@
+const cwd = process.cwd();
+const path = require('path');
+const merge = require('lodash.merge');
+const webpack = require('webpack');
+const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
+
+const MODULE_NAME = 'bundle';
+
+const initialOptions = {
+    minify: false,
+    cssInjection: false,
+}
+
+const createWebpackConfig = (entry, outputPath, opts = initialOptions) => {
+    const options = merge({}, initialOptions, opts);
+    console.log(options);
+
+    return {
+        devtool: options.minify && 'source-map',
+        context: cwd,
+        resolve: {
+            extensions: ['.js'],
+        },
+        entry: [entry],
+        output: {
+            path: cwd,
+            libraryTarget: 'commonjs2',
+            filename: outputPath || `${MODULE_NAME}.js`,
+            publicPath: '/',
+        },
+        module: {
+            loaders: [
+                {
+                    test: /\.(jpe?g|png|gif)$/i,
+                    loader: 'url-loader',
+                    options: {
+                        limit: 100000,
+                    },
+                },
+                {
+                    test: /\.(js|jsx)$/,
+                    loader: 'babel-loader',
+                },
+                {
+                    test: /\.s?css$/,
+                    loaders: ExtractTextWebpackPlugin.extract({
+                        fallback: 'style-loader',
+                        use: [
+                            'css-loader',
+                            'sass-loader',
+                        ],
+                    }),
+                },
+                {
+                    test: /\.(woff|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+                    loader: 'base64-font-loader',
+                },
+            ],
+        },
+        plugins: [
+            options.minify && new webpack.optimize.UglifyJsPlugin({
+                compress: { warnings: false },
+            }),
+            new ExtractTextWebpackPlugin({
+                filename: path.dirname(outputPath) + '/styles.css',
+                disable: options.cssInjection, // disable the file seperation and use style-loader instead
+            }),
+        ].filter(Boolean),
+    };
+};
+
+module.exports = createWebpackConfig;

package.json

@@ -22,6 +22,7 @@
     "babel-runtime": "^6.23.0",
     "base64-font-loader": "0.0.4",
     "css-loader": "^0.26.2",
+    "extract-text-webpack-plugin": "^2.1.2",
     "lodash.merge": "^4.6.0",
     "node-sass": "^4.5.0",
     "sass-loader": "^6.0.2",