How to add loaders and configuration options to the webpackconfig in esnext-webpack skeleton.

[istrau2]

I am trying to switch over to the new skeleton. Here is my current webpackconfig:

module.exports = {
    devServer: {
        host: 'localhost',
        https: true,
        port: 44366,
        historyApiFallback: {
            index: 'index.html'
        },
        proxy: {
            '/api*': {
                target: 'http://localhost:5000',
                headers: {Connection: 'keep-alive'}
            }
        }
    },
    resolve: {
        alias: {
            resources: path.resolve( __dirname, 'src', 'resources'),
            app: path.resolve( __dirname, 'src', 'app'),
            utils: path.resolve( __dirname, 'src', 'resources', 'utils', 'utils'),
        }
    },
    entry: {
        main: [
            './src/main'
        ]
    },
    output: {
        path: path.join(__dirname, 'build'),
        filename: 'bundle.js'
    },
    plugins: [
        new AureliaWebpackPlugin({
            includeSubModules: [
                {
                    moduleId: 'pnotify'
                }
            ]
        })
    ],
    module: {
        preLoaders: [
            //{test: /\.js$/, loader: 'eslint-loader'}
        ],
        loaders: [
            {
                test: /pnotify.*\.js$/,
                loader: "imports?define=>false,global=>window"
            },
            {
                test: /\.css?$/,
                loader: 'style!css'
            },
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015-loose', 'stage-1'],
                    plugins: ['transform-decorators-legacy']
                }
            },
            {
                test: /\.(html|scss)$/,
                loader: 'raw'
            },
            {
                test: /\.(png|gif|jpg)$/,
                loader: 'url-loader?limit=8192'
            },
            {
                test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader?limit=10000&minetype=application/font-woff2'
            },
            {
                test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader?limit=10000&minetype=application/font-woff'
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader'
            }
        ]
    }
};

Then in my main.js I have:

import '!style!css!sass!./main.scss';

I am having a hard time adapting this to the new skeleton (or even knowing where to start). Specifically:

1) How do I add configuration options to wepack (i.e. I have a proxy option passed to my devServer and a bunch of custom resolves).

2) How do I add advanced loading support (e.g. I am using the imports-loader for pnotify)

3) How can I duplicate my sass-loading workflow, where I use the raw-loader for all the sass and then just load the one main file using the sass-loader (this is to avoid warnings on the compilation of each individual file which may not have references to each variable it uses, whereas these variables are all available in the final main.scss)?

[niieani]

Docs are coming soon. Please be patient.

[istrau2]

@niieani Ok, thanks. No problem, would rather see good docs than see them quickly. That said, would there be the possibility to include instructions on how to use this skeleton to generate an aurelia plugin (that can be published to npm and consumed by any of the other plugins), if that is even possible (or should we be using the gulp aurelia-plugin-skeleton project for that?)?

[niieani]

Initial docs regarding easy-webpack are published: https://github.com/easy-webpack/core