Webpack configuration

Question

The problem is with webpack, here is config file:

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var nodeExternals = require('webpack-node-externals');

module.exports = {
    devtool: 'source-map',
    target: "node",
    externals: [nodeExternals()],
    resolve: {
        extensions: [ '', '.js', '.jsx' ]
    },
    module: {
        loaders: [
            { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
            { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
        ]
    },
    entry: {
        main: ['./ReactApp/index.js'] //'./ReactApp/boot-client.jsx'
    },
    output: {
        path: path.join(__dirname, '/wwwroot/dist'),
        filename: '[name].js',
        publicPath: '/dist/' // Tells webpack-dev-middleware where to serve the dynamically compiled content from
    },
    plugins: [
        new ExtractTextPlugin('main.css')
    ]
};

With this config I am getting resulting bundle in 75kb, but when I am loading 'main.js', I see error

Uncaught ReferenceError: require is not defined

In case I remove

target: "node", 
externals: [nodeExternals()],

'main.js' becomes 1.5mb size with all sources from dependencies included, but no error occurs. Please help me with config for this thing

Answer 1

So the final webpack.config file looks like this:

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

module.exports = {
    devtool: 'source-map',
    target: "web", 
    resolve: {
        extensions: [ '', '.js', '.jsx' ]
    },
    module: {
        loaders: [
            { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
            { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
            { test: /\.(eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?/, loader: 'url'}
        ]
    },
    entry: {
        main: ['./ReactApp/index.js'],
        vendor: [
    //"babel-core" //fails to bundle
    //"font-awesome" //fails to bundle
    //"domain-task", //fails to bundle stuff
    "bootstrap", 
    "formsy-react",
    "formsy-react-components",
    "griddle-react",
    "history",
    "jquery",
    "memory-fs",
    "react",
    "react-bootstrap-typeahead",
    "react-codemirror",
    "react-dom",
    "react-redux",
    "redux",
    "require-from-string",
    "underscore",
    "webpack-externals-plugin",
    "redux-thunk",  
    ],
    },
    output: {
        path: path.join(__dirname, '/wwwroot/dist'),
        filename: '[name].js',
        publicPath: '/dist/' // Tells webpack-dev-middleware where to serve the dynamically compiled content from
    },
    plugins: [
        new ExtractTextPlugin('main.css'),
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
    ]
};

I've added another entry point for 'vendor' to make it a chunk, which later simply added as a script.

Thank you.