Есть ли способ выставить модуль глобально из пакета поставщика Webpack DllPlugin? - PullRequest
Новая
       40

Есть ли способ выставить модуль глобально из пакета поставщика Webpack DllPlugin?

0 голосов
/ 08 сентября 2018

Используя Webpack 4, я создаю пакет и пакет поставщиков. Пакет поставщика содержит jQuery, а пакет кода ссылается на jquery с помощью 'import * from jquery'. Это отлично работает.

Однако теперь мне нужно использовать сторонний (уже уменьшенный) файл 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'))
      })

Итак, я могу найти jquery в глобальном объекте vendor_hash, но не могу заставить его отобразить его на $ независимо от того, что я пытаюсь (Большинство плагинов, похоже, видят, что $ никогда не используется ни в одном коде Я поставляю для комплекта и, таким образом, кажется, не включать его). Если я добавлю что-то подобное в мой файл 'entry.js', это все равно не будет работать: 

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