0

我正在创建一个用 Babel 编译并由 Webpack 捆绑的 React/Redux 应用程序。我想实现一个插件功能。所以我使用带有动态 import() 的代码拆分来划分每个插件的主包。但是，如果我在很多地方都需要相同的插件，Webpack 将为使用的任何 import() 捆绑一个包并对其进行迭代（0.bundle.js，1.bundle.js，...）。我尝试在 import() 的注释中使用 webpackChunkName: "MyPlugin" 认为如果我导入具有相同块名称的包，它将在捆绑时替换另一个包，但是因为我使用 babel-plugin-dynamic-import-webpack ， webpackChunkName 似乎不再起作用了。由于项目隐私，我无法提供任何可测试的演示。任何想法？

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"
                        ]
                    }
                }
            },
[...]
4

1 回答 1

0

我用 require.ensure() 替换了 Dynamic import()。

const MyPlugin = require.ensure([], function (require) {
    const plugin = require('./plugins/MyPlugin/MyPlugin.jsx');
    return new plugin.default;
}, "MyPlugin");
于 2019-02-27T21:47:55.167 回答