webpack mit react-bootstrap-tabelle fehler bekommen jQuery nicht gefunden

Question

Ich habe kleine Dienstprogramm Projekt, wo ich react Bootstrap-Tabelle verwenden. Ich bündle dieses Projekt mit dem webpack, um es in ein anderes Projekt zu integrieren. Meine Webpack-Konfigurationsdatei sieht so aus. Wenn ich in das Hauptprojekt schlucke, in dem ich das Dienstprogrammpaket importiert habe; Ich bekomme folgenden Fehler.

Error: Cannot find module 'jquery' from 'C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\src\javascript\components\dnsIpam' 
at C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:46:17 
at process (C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:173:43) 
at ondir (C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:188:17) 
at load (C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:69:43) 
at onex (C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:92:31) 
at C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:22:47 
at FSReqWrap.oncomplete (fs.js:82:15) 

webpack Konfigurationsdatei

const path = require('path'); 
var webpack = require('webpack'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var build = 'dns-ipam'; 

// shared config settings 
var config = { 
    module: { 
    loaders: [ 
     { test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ }, 
     { test: /\.(less|css)$/, loader: ExtractTextPlugin.extract('style-loader', 
     'css-loader!less-loader') }, 
     { test: /\.(png|jpg|gif|jpeg|svg)$/, 
     loader: 'file?name=images/[name].[ext]' }, 
     { test: /\.(ttf|woff|eot|otf)$/, 
     loader: 'file?name=fonts/[name].[ext]' }, 
     { test: /\.json$/, 
     loader: 'json' }, 
    ], 
    }, 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: `${build}-react-components.js`, 
    library: `${build}-react-components`, 
    libraryTarget: 'umd', 
    }, 
    plugins: [ 
    new ExtractTextPlugin(`${build}-react-components.css`), 
    new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery',}), 
    ], 
    externals: [{ 
    react: { 
     root: 'React', 
     commonjs2: 'react', 
     commonjs: 'react', 
     amd: 'react', 
    }, 
    }, { 
    'react-dom': { 
     root: 'ReactDOM', 
     commonjs2: 'react-dom', 
     commonjs: 'react-dom', 
     amd: 'react-dom', 
    }, 
    }], 
}; 

// custom config settings 
config.entry = './src/components/dns-ipam-index.js'; 

// if (build == 'dns-ipam') { 
// config.plugins.push(new webpack.optimize.UglifyJsPlugin({ 
//  compress: { warnings: false }, 
// })); 
// } 


module.exports = config; 

Answer 1

Platz heruntergeladenen JQuery Datei im root Ordner des Projekts und es in Ihrer HTML-Datei wie folgt verwenden -

<script type="text/javascript" src="jquery-1.9.1.min.js"> 

Answer 2

Reagieren -bootstrap hat eine interne Abhängigkeit von jQuery.

Ich kann sehen, dass Sie explizit Knotenmodule ausschließen, daher wird Ihr Code diese Abhängigkeiten nicht verwenden können. auszuschließen:/node_modules/

Ich werde Sie split your code vorschlagen und einen Anbieter Config erstellen, und es sind explizit jquery und reagieren-Bootstrap-Tabelle

var webpack = require("webpack"); 

module.exports = { 
    entry: { 
    app: "./app.js", 
    vendor: ["jquery", "react-bootstrap-table", ...], 
    }, 
    output: { 
    filename: "bundle.js" 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js") 
    ] 
};