Question

我有一个Web应用程序（客户端）javascript是用es6编写的，主要入口点是app.js。

我可以使用webpack捆绑它，或者在外部引用jQuery之类的供应商库，或者将它们包含在bundle中 - 具体取决于首选项。为了使其在浏览器中正常工作，我必须指定libraryTarget和library，如下所示：

//snip
entry: {
    "app.bundle": ["./app.js"],
},
output: {
    path: path.join(__dirname, "wwwroot\\js"),
    filename: "[name].js",
    libraryTarget: "var",
    library: "app"
}
//snip

但是我喜欢让我的供应商库分开捆绑。

我可以使用CommonsChunkPlugin执行此操作，但是它似乎与library*属性一起使用也很好，因为它们也适用于它。我最终得到的是app.jQuery，而不仅仅是jQuery

如何分离我的供应商代码并提供适当的全局变量以满足他们的需求，同时还能正确地将我的应用程序代码暴露给浏览器？

webpack.config此处：

var path = require('path'),
    webpack = require('webpack');

module.exports = {
    context: path.join(__dirname, 'wwwroot'),
    entry: {
        "app.bundle": ['./js/app.js'],
        "vendor.bundle": ['jquery', 'jquery-validation', 'jquery-validation-unobtrusive']
    },
    output: {
        path: path.join(__dirname, 'wwwroot\\js'),
        filename: '[name].js',
        libraryTarget: 'var',
        library: 'app'
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'stage-0']
                }
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js']
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor.bundle',
            minChunks: Infinity
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })
    ]
}

Answer 1

如果您的外部提供了jquery插件并且您正在开发库，我建议您使用externals代替ProvidePlugin。这意味着当您测试捆绑的库时，必须明确地提供jQuery。

外部

externals: {
  $: require.resolve('jquery'),
  'window.$': require.resolve('jquery')
  // ... and so on
}

您测试捆绑图书馆的index.html将会是：

<script src='jquery.min.js'></script>
<script src='myLibrary.min.js'></script>

使用libraryTarget

1 个答案: