2

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

我可以使用 webpack 将其捆绑起来，或者在外部引用 jQuery 等供应商库，或者将它们包含在捆绑包中 - 取决于偏好。为了让它在浏览器中正常工作，我必须指定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'
        })
    ]
}
4

1 回答 1

0

如果您的 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>
于 2017-07-07T13:30:45.447 回答