1

使用 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 文件允许我继续在我的包中使用“导入”。

那么，我如何只加载一次 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");
4

0 回答 0