如何在 webpack 中有条件地使用 bundle答案

【问题标题】：How to conditionally use a bundle in webpack如何在 webpack 中有条件地使用 bundle
【发布时间】：2016-04-09 01:42:36
【问题描述】：

我有一个 app.bundle.js（基本上是主应用程序包）和两个 cordova 包：iosCordova.bundle.js 和 androidCordova.bundle.js。我只编写 src 其中一个脚本，具体取决于用户是在 ios 还是 android 上登录。我在生成的文件夹（名为 _dist）中有所有包、css、png 和除 index.html 之外的所有内容。我不能使用 htmlWebpackPlugin 将 index.html 放在此文件夹中，因为否则两个 cordova 包都会有一个自动脚本 src（这是我想避免的）。我的问题是构建项目：当我运行构建时，它正在 _dist 中查找 index.html，导致 404。仅供参考，当我运行“npm run dev”时，它知道它应该在主文件夹中查找 index.html，而app.bundle.css 和 app.css 应该在 _dist 中。

我的 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>

【问题讨论】：

标签： javascript html cordova webpack webpack-dev-server

【解决方案1】：

所以答案是：

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

【讨论】：