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.