Question

我正在使用Webpack 2和Bootstrap 4.我想只使用整个软件包中的一个Modal组件。

有可能吗？我试图从js / dist / modal导入它，但我有一个例外：无法在bootstrap中解析导出

目前我提供了类似供应商依赖的引导程序，但我的供应商文件非常大（350 kb）。我想只捆绑我正在使用的组件。

HEre是我的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"
            }
        })

    ],


};

以下是我尝试使用它的方法 App.component.js

const a = require("bootstrap/js/dist/modal");

console.log(a); //I want to pass some jquery element later for Modal and handle it if the exported function will be exist

Answer 1

在此阶段，它似乎不支持Javascript模块。这个问题似乎跟踪了这个问题：

https://github.com/twbs/bootstrap/issues/19017

如何通过webpack 2从bootstrap 4中仅导入一个组件

1 个答案: