Как предотвратить динамический импорт для дублирования пакета? - PullRequest
Новая
       28

Как предотвратить динамический импорт для дублирования пакета?

0 голосов
/ 21 февраля 2019

Я создаю приложение React / Redux, скомпилированное с Babel и связанное с Webpack.Я хочу реализовать функцию плагина.Поэтому я использую разделение кода с помощью динамического импорта (), чтобы разделить основной пакет для каждого плагина.Однако, если мне понадобится один и тот же плагин во многих местах, Webpack будет связывать пакет для любого используемого import () и выполнять его итерацию (0.bundle.js, 1.bundle.js, ...).Я пытаюсь использовать webpackChunkName: «MyPlugin» в комментарии в import (), думая, что, если я импортирую группу с тем же именем, она заменит другую при упаковке, но так как я использую babel-plugin-dynamic-import-webpackwebpackChunkName, похоже, больше не работает.Из-за конфиденциальности проекта я не могу предоставить тестируемую демонстрацию.Есть идеи? 

import( /* webpackChunkName: "MyPlugin" */ `./plugins/MyPlugin.jsx` );

.babelrc 

{  
    "presets": [
        "@babel/preset-env", 
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-syntax-jsx",
        "@babel/plugin-transform-object-assign",
        "dynamic-import-webpack",
        ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "ant"]
    ],
    "env": {
        "node": {
            "plugins": [
                ["babel-plugin-transform-require-ignore",
                {"extensions": [".less", ".scss", ".png", ".jpg"]}
            ]
        ]
    },
    "test": {
        "presets": [["env", {"modules": "commonjs"}]]}
    },
    "comments": true
}

webpack.config.js 

[...]
module.exports = {
    entry: entry,

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

    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: [/node_modules/],
                use: {
                    loader: 'babel-loader',
                    query: {
                        plugins: [
                            "@babel/plugin-proposal-class-properties",
                            "@babel/plugin-syntax-dynamic-import",
                            "@babel/plugin-syntax-jsx",
                            "@babel/plugin-transform-object-assign",
                            "dynamic-import-webpack",
                            ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "ant"]
                        ],
                        presets: [
                            "@babel/preset-env",
                            "@babel/preset-react"
                        ]
                    }
                }
            },
[...]

1 Ответ

0 голосов
/ 28 февраля 2019

Я заменил динамический импорт () на require.ensure ().

const MyPlugin = require.ensure([], function (require) {
    const plugin = require('./plugins/MyPlugin/MyPlugin.jsx');
    return new plugin.default;
}, "MyPlugin");
...