Webpack running through grunt webpack doesn't error or complete, or do anything

Question

Trying to convert an old system off bower into npm using webpack, and grunt webpack. Just trying to use webpack to load in NPM files, not run anything else, and the rest of the grunt file finishes loading and uglifying and stuff, and runs its own node server. It gets to this point and freezes and never comes back.

Loading "grunt-webpack" plugin

Registering "/Users/***/***/***/node_modules/grunt-webpack/tasks" tasks.
Loading "webpack-dev-server.js" tasks...OK
+ webpack-dev-server
Loading "webpack.js" tasks...OK
+ webpack

Running "webpack" task

Here's my grunt code (super basic obviously)

webpack: {
  options: require("./config/webpack.dev.js"),
},

Here's that dev file

const webpack = require('webpack');
const helpers = require('./helpers');
const merge = require('webpack-merge');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { BaseHrefWebpackPlugin } = require('base-href-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ConcatPlugin = require('webpack-concat-plugin');
const ngInventory = require('./ng1-vendor-index.js');

const common = require('./webpack.common.js');

const ENV = process.env.NODE_ENV = process.env.ENV = 'dev';

module.exports = merge(common(ENV), {
    devtool: 'source-map',

    module: {
        rules: [
            {
                test: /\.(ts|js)$/,
                loaders: ['angular-router-loader'],
            },
            {
                test: /\.((s*)css)$/,
                use: [{
                    loader: 'style-loader',
                },{
                    loader: 'css-loader',
                },{
                    loader: 'sass-loader',
                }]
            },
            {
                test: /src\/.+\.(ts|js)$/,
                exclude: /(node_modules|\.spec\.ts$)/,
                loader: 'istanbul-instrumenter-loader',
                enforce: 'post',
                options: {
                    esModules: true
                }
            }
        ]
    },
    debug: true,
    devTool: 'eval',
    plugins: [
        new ConcatPlugin({
            uglify: false,
            sourceMap: true,
            name: 'vendor',
            outputPath: './',
            fileName: '[name].[hash].js',
            filesToConcat: ngInventory.vendor1
        }),

        new BaseHrefWebpackPlugin({ baseHref: '/'}),

        new HtmlWebpackPlugin({
            favicon: helpers.root('client/assets/image/favicon.png'),
            template: "./client/index.html",
            filename: "./client/index.html",
        }),
       new webpack.NoEmitOnErrorsPlugin(),
    ],
});

And here is the common file:

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals')
const helpers = require('./helpers');

module.exports = env => ({
    entry: {
        server: './server/app.js',
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    output: {
        path: helpers.root(`dist/${env}`),
        publicPath: '/',
        filename: '[name].js'
    },
    target: 'node',
    node: {
        // Need this when working with express, otherwise the build fails
        __dirname: false,   // if you don't put this is, __dirname
        __filename: false,  // and __filename return blank or /
    },
    externals: [nodeExternals()],

    module: {
        rules: [
            {
            // Transpiles ES6-8 into ES5
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                  loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                include: [
                    helpers.root('client'),
                ],
                loader: 'html-loader'
            },

            {
                test: /\.((s*)css)%/,
                include: [
                    helpers.root('client/app'),
                    helpers.root('client/components'),
                ],
                exclude: 'node_modules/',
                loaders: ['to-string-loader', 'css-loader', 'sass-loader']
            },

            {
                test: /\.(woff|woff2|eot|tts)$/,
                use: [{
                    loader: 'file-loader'
                }]
            }
        ]
    },

    plugins: [

        new webpack.DefinePlugin({
            'process.env': {
                'ENV': JSON.stringify(env)
            }
        }),

        new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/, path.join(__dirname, './client')),
    ]
});

A sample from the vendor index file:

const helper = require('./helpers');

exports.vendor1 = [
    helper.root('node_modules/lodash/lodash.js'),
    helper.root('node_modules/lodash-deep/lodash-deep.js'),
...
...
]

I'm just really not sure what to do, couldn't bring up any google results or stack results because theres no errors happening either. I've tried all verbose levels of logging all to no avail. What in the world am I missing?

Answer 1

As the documentation shows, you haven't configured any targets, like dev or prod. You've only specified options. You want

webpack: {
  options: {},
  dev: require("./config/webpack.dev.js"),
},

As an aside, there's no benefit to using Webpack with Grunt.