CODEWITHSUNDEEP
javascripthtmlcordovawebpackwebpack-dev-server
danny libren
danny libren

Reputation: 137

How to conditionally use a bundle in webpack

I have an app.bundle.js (basically the main app bundle) and two cordova bundles: iosCordova.bundle.js and androidCordova.bundle.js. I only script src one of them depending on whether the user is logging in on an ios or android. I have all the bundles, css's, png's and everything except index.html in a generated folder (named _dist). I can't put index.html using htmlWebpackPlugin in this folder because otherwise there would be an automatic script src to both the cordova bundles (which is something I want to avoid). My problem is building the project: when I run build it is looking for index.html in _dist which results in 404. FYI When I run "npm run dev" however it knows that it should look for index.html in the main folder while app.bundle.css and app.css should be in _dist.

my webpack.config:

    config.entry = {
        app: './app.js',
        iosCordova: ['./static/wrapper/js/ios/cordova_all.min.js'],
        androidCordova: ['./static/wrapper/js/android/cordova_all.min.js']
    };

    config.output = {
        path: __dirname + '/_dist',

        publicPath: 'localhost:8080/',

        filename: '[name].bundle.js',

        chunkFilename: '[name].bundle.js'
    };

    config.module = {
        noParse: /node_modules\/html2canvas/,
        preLoaders: [],
        loaders: [
            {

                test: /\.js$/,              
                loader: 'babel?optional[]=runtime',
                presets: ['es2015'],
                exclude: [
                    /node_modules/,
                    /cordova_all/
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
                loader: 'file?name=[name].[ext]'
            }, {
                test: /\.html$/,
                loader: "ngtemplate?relativeTo=" + __dirname + "!raw"
            }]
    };
    var cssLoader = {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss', 'scss', 'sass')
    };

    config.module.loaders.push(cssLoader);
    config.devServer = {
        stats: {
            modules: false,
            cached: false,
            colors: true,
            chunk: false
        }
    };

    //config.resolve = {
    //  alias: {
    //      moment: "node_modules/moment/min/moment.min.js"
    //      //"jquery-ui": "vendor/plugins/jquery-ui.min.js"
    //  }
    //};

    return config;
};

index.html:

<!DOCTYPE html>

...

<html>
<head>
    <script type="text/javascript">
        (function(){

            if (window.location.search.indexOf('cordova=') > -1) {
                var platform = /i(phone|pod|pad)/gi.test(navigator.appVersion) ? 'iosCordova.bundle.js' : 'androidCordova.bundle.js';

                var cordovaScript = document.createElement('script');
                cordovaScript.setAttribute('src',platform);
                document.head.appendChild(cordovaScript);
            }
        }());
    </script>

    <link href="app.css" rel="stylesheet">
</head>

...

<script src="app.bundle.js"></script>
</body>
</html>

Upvotes: 0

Views: 1896

Answers (1)

danny libren
danny libren

Reputation: 137

So the answer is:

config.plugins.push(
    new HtmlWebpackPlugin({
        template: './index.html',
        inject: true,
        excludeChunks: ['app','iosCordova','androidCordova']
    })
);

Upvotes: 1

Related Questions