Search code examples
webpackwebpack-2

Webpack 2 Code Not Running After Upgrading


We have been using webpack 1.x for some time now with no problems. I upgraded to 2.4.1 today following the migration instructions and everything seemed to be fine. After upgrading though none of the webpack code works. I'm not getting an errors. Just nothing is displaying. The div's where my components should render are empty.

So I added some console.logs that should have ran, and nothing displayed in the console. Then I found those console.logs and added breakpoints and sure enough the code was not being run for some reason.

Here is the upgraded webpack.config.js file contents:

var webpack = require("webpack");
var path = require("path");

module.exports = {
    entry: {
       index: './index.jsx'
    },
    output: {
        path: path.join(__dirname, 'js'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    babelrc: false,
                    presets: [

                        'react',
                        'stage-0'
                    ]
                }
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            }
        ]
    },
    resolve: {
        extensions: [ '.js', '.jsx', '.css' ],
        alias: {
            "notification-js-root": __dirname + "/node_modules/notification-js"
        }
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('init.js')
    ]
};

Solution

  • Ok after spending hours trying to fix this I discovered that the webpack.optimize.CommonsChunkPlugin has changed in version 2 of webpack. It automatically appends .js to the filename you use.

    So it was generating a file of init.js.js and I was loading the old init.js file generated by webpack 1, which apparently causes none of the subsequent code to load and displays no errors.

    So this fixed it: new webpack.optimize.CommonsChunkPlugin('init')