Webpack throws error with list of pkg dependencies on splitting vendor from app

Question

I am trying to implement code splitting in my webpack configuration for prod builds - separating vendor files from app code. But when I try to build, I get the following error:

ERROR in multi bootstrap font-awesome jquery popper.js progress-bar-webpack-plugin vue vue-resource vue-router vuex

Basically listing the packages in my dependencies. Here's a snippet of what I have in my Webpack.dist.conf file:

const pkg = require('../package.json');
output: {
  path: path.join(process.cwd(), conf.paths.dist),
  filename: '[name]-[hash].js'
},
entry: {
  app: `./${conf.path.src('index')}`,
  vendor: Object.keys(pkg.dependencies)
}

EDIT I found that the issue was with font-awesome. The moment I removed font-awesome from vendor.js, things started working fine. Still no idea what is wrong with font-awesome that caused this error though.

score 0 · Answer 1 · answered Oct 07 '17 at 18:18

I tried using webpack-dll-bundle-plugin to separate vendor from app. It work like a charm :)

Hopefully it helps.

Sample webpack.config.js

const path = require('path');
const join = path.join.bind(path, __dirname);
const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin;
const pkg = require('./package.json');
const webpack = require('webpack');

module.exports = {
    entry: {
        main: './src/scripts/main.js'
    },
    output: {
        path: path.resolve('./client'),
        filename: '[name].js',
        publicPath: '/client/',
        chunkFilename: '[name].js'
    },
    cache: true,
    module: {
        loaders: [{
                test: /\.js$/,
                loader: 'babel-loader',
                // exclude: [path.join(__dirname, 'node_modules'), path.join(__dirname, './src', 'scripts', 'routes')],
                exclude: [path.join(__dirname, 'node_modules')],
                query: {
                    cacheDirectory: true,
                    presets: ['react', 'es2015'],
                    compact: false
                }
            }
        ]
    },
    plugins: [
        new DllBundlesPlugin({
            bundles: {
                vendor: Object.keys(pkg.dependencies)
            },
            dllDir: join('client', 'vendor'),
            webpackConfig: {
                plugins: [
                    new webpack.optimize.UglifyJsPlugin({
                        comments: false
                    })
                ]
            }
        })

    ],
    resolve: {}
};

Package.json :

"dependencies": {
    "classnames": "^2.2.5",
    "es6-map": "^0.1.4",
    "es6-promise": "^4.0.5",
    "file-saver": "^1.3.3",
    "guid": "0.0.12",
    "jquery": "^3.1.1",
    "lodash": "^4.17.4",
    "moment": "^2.14.1",
    "prop-types": "^15.6.0",
    "react": "^15.4.2",
    "react-addons-transition-group": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-draggable-tab": "^0.8.1",
    "xml-writer": "^1.7.0"
  }

Webpack throws error with list of pkg dependencies on splitting vendor from app

1 Answers1