Webpack 运行通过 grunt webpack 不会出错或完成，或做任何事情

Question

尝试使用 webpack 和 g运行t webpack 将旧系统从 bower 转换为 npm。只是尝试使用 webpack 加载 NPM 文件，而不是运行其他任何东西，g运行t 文件的其余部分完成加载和丑化和填充，并且运行s 它自己的节点服务器。它到了这一点并冻结并且永远不会回来。

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

这是我的 g运行t 代码（显然超级基础）

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

这是开发文件

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(),
    ],
});

这是通用文件：

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')),
    ]
});

来自供应商索引文件的示例：

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

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

我真的不确定该怎么做，无法显示任何 google 结果或堆栈结果，因为也没有发生任何错误。我已经尝试了所有详细级别的日志记录都无济于事。我到底错过了什么？

Answer 1

如 the documentation 所示，您尚未配置任何目标，例如 dev 或 prod。您只指定了 options。你要

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

顺便说一句，将 Webpack 与 Grunt 结合使用没有任何好处。

Webpack 运行通过 grunt webpack 不会出错或完成，或做任何事情

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

angularjs

gruntjs

webpack

Webpack 运行 通过 grunt webpack 不会出错或完成，或做任何事情

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

angularjs

gruntjs

webpack

Webpack 运行通过 grunt webpack 不会出错或完成，或做任何事情