Записи и проблемы Webpack с новым синтаксисом зависимости - PullRequest
Новая
       3

Записи и проблемы Webpack с новым синтаксисом зависимости

1 голос
/ 28 мая 2020

Я использую бета-версию webpack v5.0.0 в своем веб-приложении, и у меня возникают некоторые проблемы с использованием новой опции dependOn в разделе ввода.

У меня есть 2 приложения, отдельно репозитории, которые я комбинирую в своем веб-приложении. Для простоты я назову их appA и appB .

Каждое приложение имеет собственное репо и собственную конфигурацию веб-пакета. Я объединяю appB и импортирую эти файлы пакета как зависимость от appA .

Проблема в том, что, поскольку appB имеет несколько записей, было много повторяющегося кода в файлах пакета. Я начал использовать новый синтаксис зависимости, который казался отличным исправлением, за исключением того, что теперь, когда я пытаюсь импортировать appB в appA , я получаю следующую ошибку:

Uncaught (in promise) TypeError: loadAppB is not a constructor

При отладке в инструментах разработчика переменная loadAppB каким-то образом назначается целому числу 1.

Вот как я загружаю appB как зависимость внутри appA : 

import( /* webpackChunkName: "AppB" */ "../lib/appB" ).then( module => {
    const loadAppB = module.default;
    window.appB = new loadAppB();

Вот конфигурация веб-пакета для appB : 

const path = require("path");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: {
    AppB: { import: "./src/AppB.js", dependOn: "Class"},
    Class: "./src/Class.js",
    Subclass: { import: "./src/Subclass.js", dependOn: "Class" },
  },

  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "build"),
    libraryTarget: 'commonjs2'
  },

  mode: "production",

  optimization: {
    minimize: false,
  },

  plugins: [
    new CleanWebpackPlugin(),
  ],
};

Что интересно, если Я изменяю запись в конфигурации webpack appB на это: 

entry: {
    AppB: "./src/AppB.js",
    Class: "./src/Class.js",
    Subclass: { import: "./src/Subclass.js", dependOn: "Class" },
  },

вместо этого (оригинала): 

entry: {
    AppB: { import: "./src/AppB.js", dependOn: "Class"},
    Class: "./src/Class.js",
    Subclass: { import: "./src/Subclass.js", dependOn: "Class" },
  },

Удалив параметр dependOn в записи для appB Я могу успешно загрузить appB внутри appA .

Несмотря на то, что это работает, файл записи appB использует экспорт Class, поэтому код для файла Class дублируется (он появляется в пакете appB, а также в собственном пакете вывода)

Имеет anyon Вы сталкиваетесь с чем-то похожим или знает, почему это может происходить?

Я также включу конфигурацию веб-пакета для appA , если это поможет. 

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: {
    app: "./js/app.js"
  },

  output: {
    filename: "[name].bundle.js",
    chunkFilename: "[name].bundle.js",
    publicPath: 'build/',
    path: path.resolve(__dirname, "build"),
  },

  optimization: {
    minimize: false,
    concatenateModules: false,
  },

  mode: "production",
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.SourceMapDevToolPlugin()
  ],

  module: {
    rules: [
      {
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: 'jQuery'
        },{
          loader: 'expose-loader',
          options: '$'
        }]
      }
    ]
  },
};
...