Monday 12 June 2017

configuration.entry error in grunt-webpack for webpack 2 with node 8

I'm trying to configure webpack2 with Grunt for running on node 8. I'm trying to hook up webpack with Grunt, but keep getting the config.entry error, inspite of providing all the config.

Warning:

 Warning: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry should be one of these:
   object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
   The entry point(s) of the compilation.
   Details:
    * configuration.entry should be an object.
    * configuration.entry should be a string.
    * configuration.entry[1] should be a string.
    * configuration.entry should be an instance of function
      function returning an entry object or a promise.. Used --force, continuing.

Please can someone check what is wrong with this configuration:

Grunt Snippet:

    webpack: {
        options: webpackConfig,

        prod: {
            devtool: '',    // Disable source maps
            plugins: webpackConfig.plugins.concat(
                new webpack.optimize.DedupePlugin(),
                new webpack.optimize.UglifyJsPlugin(),
                new webpack.DefinePlugin({
                    'process.env': {
                        'NODE_ENV': JSON.stringify('production')
                    }
                })
            )
        }
    },

    'webpack-dev-server': {

        options: webpackConfig,

        start: {
            port: 9002,
            keepAlive: true
        }

    },

Webpack config:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

const SrcDir = path.resolve(__dirname, 'src');
const AppDir = path.resolve(SrcDir, 'application');

const BuildDir = path.resolve(__dirname, 'dist');
const AppBuildDir = path.resolve(BuildDir, 'application');

const ExtractSass = new ExtractTextPlugin({
filename: '[name].[contenthash].css',
disable: process.env.NODE_ENV === 'development' || 
  process.env.NODE_ENV === 'dev'
});

module.exports = {
cache: true,
context: __dirname,
entry: {
    app: path.join(AppDir, 'app.jsx'),
    vendor: [
        'react',
        'react-dom',
        'react-redux',
        'redux-dialog',
        'redux-thunk',
        'reselect'
    ]
},
output: {
    filename: '[name].js',
    path: AppBuildDir,
    libraryTarget: 'commonjs2',
    publicPath: './'
},
module: {
    rules: [{
        test: /\.scss$/,
        use: ExtractSass.extract({
            use: [{
                loader: 'css-loader'
            }, {
                loader: 'sass-loader'
            }],
            fallback: 'style-loader' // for dev env
        })
    }, {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        use: {
            loader: 'babel-loader',
            options: {
                cacheDirectory: true,
                presets: [
                    ['env', {
                        targets: {
                            browsers: ['last 3 versions'],
                            node: '8.1.0'
                        }
                    }],
                    'react'
                ]
            }
        }
    }, {
        test: /\.spec\.js$/,
        exclude: /(node_modules)/,
        use: 'mocha-loader'
    }]
},
plugins: [
    ExtractSass,
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        filename: 'vendor.bundle.js'
    })
],
resolve: {
    modules: [
        AppDir,
        path.resolve(SrcDir, "server"),
        "node_modules"
    ],
    extensions: ['.js', '.jsx']
},
devtool: 'inline-source-map',
devServer: {
    hot: true,
    contentBase: BuildDir
}
};

These are the packages I am using:

"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
"grunt-webpack": "^3.0.0"



via poushy

No comments:

Post a Comment