Question

我在我的React项目中添加了Bulma扩展之一 https://wikiki.github.io/components/quickview/

要使用它，我已经使用npm安装了它，扩展名要求在DOM完全加载时在下面添加一行，因此我将其添加到componentDidMount

var quickviews = bulmaQuickview.attach();

以及我的index.html

<script type="text/javascript" src="/node_modules/bulma-extensions/bulma-quickview/dist/js/bulma-quickview.min.js"></script>

我正在使用webpack捆绑并从捆绑中排除了所有节点模块。

问题：在webpack的开发环境中，它可以正常工作，但在将其捆绑到生产环境后，会给我错误

bulmaQuickview未定义

如何在Webpack捆绑包中捆绑特定的节点模块？以及什么是要添加的正确参考。

Webpack配置

module.exports = {
    target: 'web',
    entry: "./index.js",
    output: {
        filename: "bundle.js"
    },
    devtool: 'eval-source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /\.(png|jpg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8000, // Convert images < 8kb to base64 strings
                        name: 'images/[hash]-[name].[ext]'
                    }
                }]

            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                include: path.join(__dirname, 'dist/image'),
                loader: 'file-loader'

            }
        ]
    },
    plugins: [new WebpackNotifierPlugin(), new BrowserSyncPlugin(), new ExtractTextPlugin("styles.css"),
        new webpack.DefinePlugin({
            'API_URL': API_URL[environment]
        })
    ]
};

Answer 1

您要将其添加到index.html中，因此webpack不会捆绑它。您是否尝试过将其导入与其使用的相同js文件中？或者将其添加到index.html（make it an array）之后的条目属性中。

在webpack捆绑包中添加特定的节点模块

1 个答案: