Webpack import bootstrap .js e .css

Question

Sto costruendo un'applicazione utilizzando react, bootstrap e webpack usando es6 con babel.

Ma non riesco a importare boostrap.js e bootstrap.css nella mia app.

miei webpack.config.js

var webpack = require('webpack'), 
    HtmlWebpackPlugin = require('html-webpack-plugin'), 
    path = require('path'), 
    srcPath = path.join(__dirname, 'src'); 

module.exports = { 
    target: 'web', 
    cache: true, 
    entry: { 
    module: path.join(srcPath, 'module.js'), 
    common: ['react', 'react-router', 'alt'] 
    }, 
    resolve: { 
    root: srcPath, 
    extensions: ['', '.js'], 
    modulesDirectories: ['node_modules', 'src'] 
    }, 
    output: { 
    path: path.join(__dirname, 'tmp'), 
    publicPath: '', 
    filename: '[name].js', 
    library: ['Example', '[name]'], 
    pathInfo: true 
    }, 

    module: { 
    loaders: [ 
     {test: /\.js?$/, exclude: /node_modules/, loader: 'babel?cacheDirectory'} 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin('common', 'common.js'), 
    new HtmlWebpackPlugin({ 
     inject: true, 
     template: 'src/index.html' 
    }), 
    new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery" 
    }), 
    new webpack.ProvidePlugin({ 
      bootstrap: "bootstrap.css", 
    }), 
    new webpack.NoErrorsPlugin() 
    ], 

    debug: true, 
    devtool: 'eval-cheap-module-source-map', 
    devServer: { 
    contentBase: './tmp', 
    historyApiFallback: true 
    } 
}; 

Così nei miei file .js (reagire componenti) Sto cercando di fare: import 'bootstrap'. Ma il css non viene implementato. Le importazioni .js funzionano bene.

Quindi, come posso importare boostrap o configurare il webpack?

Answer 1

Hai bisogno di fare le seguenti cose per farlo funzionare:

1. nel file di configurazione webpack, resolve sezione, assicurarsi che il percorso del file css bootstrap è incluso.

Per fare un esempio:

var bootstrapPath = path.join(
    __dirname, 
    'development/bower_components/bootstrap/dist/css' 
); 

Poi, nel tuo webpack config oggetto:

resolve: { 
    alias: { 
     jquery: path.join(__dirname, 'development/bower_components/jquery/jquery') 
    }, 
    root: srcPath, 
    extensions: ['', '.js', '.css'], 
    modulesDirectories: ['node_modules', srcPath, commonStylePath, bootstrapPath] 
} 

2. Assicuratevi di avere lo stile caricatore e css loader. Per esempio. loaders:[{ test: /\.css$/, loader: "style-loader!css-loader" }]
3. utilizzarlo nella vostra js file di require('bootstrap.min.css');

Answer 2

Basta usare il plugin di meno e dichiarare correttamente ...

// Webpack file 
{ 
    test: /\.less$/, 
    loader: "style-loader!css-loader!less-loader" 
}, 
// I have to add the regex .*? because some of the files are named like... fontello.woff2?952370 
{ 
    test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?.*)?$/, 
    loader: 'url?limit=50000' 
} 

// Less file 
@import '~bootstrap/less/bootstrap'; 

sto ancora lavorando sul JS, ma vi permetterà di presto :-)