使用 webpack 创建供应商和应用程序包并使用 requirejs 加载答案

【问题标题】：with webpack create vendor and app bundles and load with requirejs使用 webpack 创建供应商和应用程序包并使用 requirejs 加载
【发布时间】：2018-07-29 01:41:49
【问题描述】：

是否可以使用 webpack 创建多个捆绑包（'vendor'、'app'）并使用 requirejs 加载它们？在此示例中，我可以创建捆绑包，但是当我尝试使用 requirejs 加载它们时，返回的模块是未定义的。

webpack.config.js：

module.exports = {    
    entry: {
        app: './app.js',
        //vendor: ['bootstrap', 'popper.js','jquery','underscore']
    },
    devtool: 'source-map',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].bundle.js',      
      libraryTarget: 'umd',
      globalObject: 'this',
      umdNamedDefine: true,
      pathinfo: true
    },
    resolve: {        
        alias: {
            popper: "popper.js",    
        },
        extensions: ['.js'] // File types
    },    

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },            
        ]
    },


    plugins: [
    ],    

    optimization: {
        namedModules: true,
        splitChunks: {
            chunks: "async",
            cacheGroups: {
                app: {
                    reuseExistingChunk: true,
                },
                vendor: {
                    test: /node_modules/,
                    chunks: 'all',
                    name: 'vendor',
                },
            }
        },        
    },
};

index.js

requirejs.config({
    paths: {
        'vendor': './dist/vendor.bundle',
        requireLib: 'require',
        'all_app': './dist/app.bundle'
    },
    bundles: {
        'all_app': ['app','./menuTooltips','./NavMenu'],
        'vendor': [/*'bootstrap',*/ 'jquery' /*, 'underscore',*/ /*, 'popper'*/ ],
    },
    nodeIdCompat: true,
});

define(['require', './app'], function (require, app) {
    console.log(app); // app is undefined!!!!
    app.Init();
});

index.html

<script type="text/javascript" src="./lib/require.min.js" data-main="index.js"></script>

当 index.js 需要 'app' 时 dist/app.bundle 已加载（网络选项卡显示），但返回的应用对象未定义。

【问题讨论】：

标签： javascript webpack requirejs

【解决方案1】：

App bundle 可以在没有 requirejs 的情况下加载（必须首先包含供应商 bundle）：

index.html

    <script type="text/javascript" src="./dist/vendor.bundle.js"></script>
    <script type="text/javascript" src="./dist/app.bundle.js"></script>
    <script>
        window.onload = function () {
            MyLib.app.Init();
        };
    </script>

webpack.config.js

添加行'库'：

  output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].bundle.js',                
      libraryTarget: 'umd',
      globalObject: 'this',
      umdNamedDefine: true,
      library: ["MyLib", "[name]"]
    },

【讨论】：