Question

使用Webpack 4，我正在创建一个包和一个供应商包。供应商捆绑包含jQuery，并且代码捆绑使用'import * from jquery'引用jquery。效果很好。

但是，我现在需要使用第3方（已缩小）的javascript文件。该文件期望jquery在全局窗口对象上显示为“ $”。同样，我的捆绑包也需要在新的缩小文件后加载。

所以我有

<script src='./libs/jquery-3.2.1.min.js'></script>
<script src='../vendor.js'></script>
<script src="./libs/newMinifiedFile.js"></script>
<script src="../bundle.js"></script>

作为我当前的解决方法。静态jquery文件将$对象链接到全局名称空间，然后vendor.js文件使我可以继续在捆绑软件中使用'import'。

那么，如何只加载一次jquery，并同时使用两种方式？与我在网上看到的大多数内容相比，这似乎是一个略有不同的问题，因为我是如何加载内容的。

这是我的配置的一个小例子：

const config = (isDebug) => {
const isDevBuild = isDebug;
const extractCSS = new MiniCssExtractPlugin({filename: 'vendor.css'});

const sharedConfig = {
    mode: isDevBuild ? 'development' : 'production',
    stats: { modules: false },
    resolve: { 
        extensions: [ '.js' ]
    },
    module: {
        rules: [
            { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' },
        ]
    },
    entry: {
        vendor: [
            'jquery'
        ],
    },
    output: {
        publicPath: 'dist/',
        filename: '[name].js',
        library: '[name]_[hash]',
    },
    plugins: [
        new webpack.NormalModuleReplacementPlugin(/\/iconv-loader$/, require.resolve('node-noop')) // Workaround for https://github.com/andris9/encoding/issues/16
    ]
};

const clientBundleConfig = merge(sharedConfig, {
    output: { 
        path: path.join(__dirname, 'wwwroot', 'dist'),
        pathinfo: false
    },
    module: {
      rules: [
        {
          test: /\.css(\?|$)/, include: path.resolve(__dirname, "client"), exclude: [/webviewer/, /redux/, /helpers/],
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                minimize: isDevBuild,
                sourceMap: isDevBuild
              }
            }
          ]
        }
      ]
    },
    plugins: [
        extractCSS,
        new webpack.DllPlugin({
            path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
            name: '[name]_[hash]'
        })
    ],
    optimization: {
      minimize: !isDevBuild,
      removeAvailableModules: false,
      removeEmptyChunks: false,
      splitChunks: false,
    },
});

在我的常规配置中，我使用：

          new webpack.DllReferencePlugin({
          context: __dirname,
          manifest: require(path.join(__dirname, 'wwwroot', 'dist', 'vendor-manifest.json'))
      })

因此，我可以在全局“ vendor_hash”对象中找到jquery，但无论如何尝试，我都无法将其映射到$（大多数插件似乎都看到$从未在任何代码中使用$我正在提供捆绑软件，因此似乎不包括在内）。如果我在“ entry.js”文件中添加了类似内容，则仍然无法使用：

window.$ = window.jQuery = require("jquery");

有没有办法从Webpack DllPlugin供应商捆绑包中全局公开模块？

0 个答案: