简体   繁体   中英

Add a specific node module in webpack bundle

I have added one of Bulma extensions in my react project https://wikiki.github.io/components/quickview/

To use it I have installed it using npm & extension requires to add below line when DOM is completely loaded, so I added it in componentDidMount

var quickviews = bulmaQuickview.attach();

and below line in my index.html

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

I am using webpack to bundle & have excluded all node modules from bundle.

Problem : In development environment for webpack it works fine but after bundling for production it gives me error that

bulmaQuickview is not defined

How can I bundle a specific node module in my webpack bundle? and what will be the correct reference to add.

Webpack config

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]
        })
    ]
};

You're adding it to the index.html so webpack isn't bundling it. Have you tried importing it into the same js file that it is used in? Either that or add it to your entry property after index.html ( make it an array ).

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM