I work with Webpack 2 and Bootstrap 4. I want to use only one Modal component from the whole package.
Is it possible? I tried to import it from js / dist / modal, but I got an exception: Unable to allow export to bootstrap
I currently provided bootstrap as a vendor dependency, but my vendor file is so large (350 kb). I want to bind only the component that I use.
This is my webpack.common.js
let process = require("process"),
path = require("path"),
webpack = require("webpack"),
helpers = require("./helpers"),
glob = require("glob"),
poststylus = require('poststylus'),
HtmlWebpackPlugin = require("html-webpack-plugin"),
ExtractTextPlugin = require("extract-text-webpack-plugin"),
CopyWebpackPlugin = require("copy-webpack-plugin"),
SpritesmithPlugin = require('webpack-spritesmith'),
srcName = "src";
const getEntry = () => {
let res = [
helpers.root(srcName, "index.js")
];
if (process.env.NODE_ENV === "development") {
res = [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:5000',
'webpack/hot/only-dev-server'
].concat(res);
}
return res;
};
const getStylLoader = () => {
let res = {
test: /\.styl$/,
exclude: /node_modules/,
loader: "style-loader!css-loader?modules=false!stylus-loader"
};
if (process.env.NODE_ENV === "production") {
res = Object.assign({}, res, {loader: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: "css-loader?modules=false&minimize=true!stylus-loader"
})
})
}
return res;
};
module.exports = {
entry : {
"vendor" : ["react", "react-dom", "react-router", "redux", "react-router-redux", "jquery", "bootstrap/dist/js/bootstrap.min.js"],
"app" : getEntry()
},
context : helpers.root(srcName),
resolve : {
modules : [
"web_modules",
"node_modules",
"spritesmith-generated",
helpers.root(srcName)
],
extensions: ['.js', '.styl', '.css']
},
module : {
rules : [
{
enforce : 'pre',
test : /\.jsx?$/,
loader : 'eslint-loader',
options : {
fix : true,
},
include : helpers.root(srcName),
exclude: helpers.root(srcName, "routes.js")
},
{
test : /\.jsx?$/,
loaders : [
'babel-loader',
],
include: [ helpers.root(srcName), "node_modules/bootstrap"],
exclude : /node_modules/
},
{
test : /\.css$/,
loaders : [
'style-loader',
'css-loader?modules=true&minimize=true',
],
},
getStylLoader(),
{test: /\.png$/, loaders: [
'file-loader?name=i/[hash].[ext]'
]},
{
test: /\.svg$/,
loader: 'babel-loader!svg-react-loader'
}
],
},
plugins : [
new webpack.ProvidePlugin({
jQuery : "jquery",
$ : "jquery",
jquery : "jquery",
Tether: "tether",
"window.Tether": "tether",
Alert: "exports?Alert!bootstrap/js/dist/alert",
Button: "exports?Button!bootstrap/js/dist/button",
Carousel: "exports?Carousel!bootstrap/js/dist/carousel",
Collapse: "exports?Collapse!bootstrap/js/dist/collapse",
Dropdown: "exports?Dropdown!bootstrap/js/dist/dropdown",
Modal: "exports?Modal!bootstrap/js/dist/modal",
Popover: "exports?Popover!bootstrap/js/dist/popover",
Scrollspy: "exports?Scrollspy!bootstrap/js/dist/scrollspy",
Tab: "exports?Tab!bootstrap/js/dist/tab",
Tooltip: "exports?Tooltip!bootstrap/js/dist/tooltip",
Util: "exports?Util!bootstrap/js/dist/util"
}),
new webpack.LoaderOptionsPlugin({
options : {
context: helpers.root(srcName),
output: { path : "./" },
stylus: {
use: [poststylus([ 'autoprefixer' ])]
},
eslint : {
configFile : '.eslintrc',
failOnWarning : false,
failOnError : false
}
}
}),
new SpritesmithPlugin({
src: {
cwd: helpers.root(srcName, "assets/images/icons"),
glob: '*.png'
},
target: {
image: helpers.root(srcName, "assets/images/spritesmith_generated/sprite.png"),
css: helpers.root(srcName, 'assets/images/spritesmith_generated/sprite.styl')
},
apiOptions: {
cssImageRef: "../images/spritesmith_generated/sprite.png"
}
})
],
};
And this is how I tried to use it App.component.js
const a = require("bootstrap/js/dist/modal");
console.log(a);