Webpack Config ошибка нескольких точек входа с фильтром - PullRequest
0 голосов
/ 07 ноября 2019

Я создал приложение React с использованием create-реагировать-приложение и извлек его, чтобы получить больше контроля над процессом сборки и превратить его в расширение браузера.

Мне нужна сборка дляработать правильно, если есть только один входной файл, но теперь, когда я пытаюсь создать 2 дополнительных файла (которые должны быть отделены от основного, поскольку они будут фоновыми файлами), я получаю ошибки при сборке, не зная, почемуэто происходит. Мне просто нужно иметь 1 файл с html-страницей с javascript (реагировать), а остальные 2 мне просто нужно быть файлами javascript для функций расширения.

Это исходная точка входа в файл Webpack:

entry: [
    // Include an alternative client for WebpackDevServer. A client's job is to
    // connect to WebpackDevServer by a socket and get notified about changes.
    // When you save a file, the client will either apply hot updates (in case
    // of CSS changes), or refresh the page (in case of JS changes). When you
    // make a syntax error, this client will display a syntax error overlay.
    // Note: instead of the default WebpackDevServer client, we use a custom one
    // to bring better experience for Create React App users. You can replace
    // the line below with these two lines if you prefer the stock client:
    // require.resolve('webpack-dev-server/client') + '?/',
    // require.resolve('webpack/hot/dev-server'),
    isEnvDevelopment &&
        require.resolve("react-dev-utils/webpackHotDevClient"),
    // Finally, this is your app's code:
    paths.appIndexJs
    // We include the app code last so that if there is a runtime error during
    // initialization, it doesn't blow up the WebpackDevServer client, and
    // changing JS code would still trigger a refresh.
].filter(Boolean),

Чтобы система могла выплевывать отдельные файлы javascript, я добавил еще 2 точки входа, например:

entry: {
    app: [
        isEnvDevelopment &&
            require.resolve("react-dev-utils/webpackHotDevClient"),
        paths.appIndexJs
    ].filter(Boolean),
    background: [
        isEnvDevelopment &&
            require.resolve("react-dev-utils/webpackHotDevClient"),
        paths.backgroundIndexJs
    ].filter(Boolean),
    content: [
        isEnvDevelopment &&
            require.resolve("react-dev-utils/webpackHotDevClient"),
        paths.contentIndexJs
    ].filter(Boolean)
},

appIndex- backgroundIndex и contentIndex определены в путифайл и указание на действительные каталоги.

При попытке запустить npm запустите build build на этом, я получаю сообщение об ошибке:

Cannot read property 'filter' of undefined

и не могу понять, что происходит с этим.

Я не могу ничего узнать о том, почему для этой точки входа требуется ".filter (Boolean)" или где я могу отключить ее, чтобы она не требовалась при сборке.

Я подумал, может быть, яможно построить так:

entry: {
    app: paths.appIndexJs,
    background: paths.backgroundIndexJs,
    content: paths.contentIndexJs
},

, но это также возвращает ту же ошибку со свойством canot read 'filter' of undefined.

Из любопытства я попробовал следующее, от которого я отказалсяrstand объединяет файлы:

entry: [
    paths.appIndexJs,
    paths.backgroundIndexJs,
    paths.contentIndexJs
].filter(Boolean),

И проект строится, но даже тогда я не вижу ни одной функции из двух разных файлов.

Я создалРеагируйте на приложения с нуля, и я знаю, что метод множественных точек входа работает для создания нескольких файлов, но когда проект был создан с помощью команды create-реагировать-приложение и извлечен, я не могу заставить точку входа работать так, как ожидалось.

Я думаю, что проблема здесь не в том, как задается запись, а в ошибках, которые появляются при попытке построить без "фильтра (логического)", установленного в строке ввода.

Единственное отличие, которое яИз «обычного» и извлеченного приложения create-реакции-приложения видно, что «обычный» способ для веб-пакета выглядит следующим образом:

// This has worked in the past when making configs from scratch
module.exports = { 
    entry: {
        app: paths.appIndexJs
        background: paths.backgroundIndexJs
        paths.contentIndexJs
    },

и извлеченное приложение-реакции-приложения выглядит следующим образом:

// this is auto generated and unsure if is the reason why it fails to 
module.exports = function(webpackEnv) { 
    const isEnvDevelopment = webpackEnv === "development";
    const isEnvProduction = webpackEnv === "production";

    ......

    return {
        entry: {
            app: [paths.appIndexJs]
            background: [paths.backgroundIndexJs],
            content: [paths.contentIndexJs]
        },

        .....
    };
};

Не уверен, оказывает ли это какое-либо влияние на точки входа, но я не вижу ничего другого, что может иметь отношение к этому.

Что такое фильтр сообщений об ошибках (булево) и какможно обойти это?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...