Kann nicht make bootstrap Arbeit mit Webpack

Arbeite ich mit einem webpack-dev-server und ich bin versucht zu zählen bootstrap.

Habe ich dieses Projekt Struktur:

── css
│   └── bootstrap.min.css
│── js
|   └── bootstrap.min.js
├── dist
├── index.html
├── package.json
├── server.js
├── src
│   ├── actions.js
│   ├── App.js
│   ├── components
│   ├── constants
│   ├── index.js
│   └── reducers.js
└── webpack.config.js

Dies ist die index.html:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
  </head>
  <body>
    <div id='root'></div>
    <script src="/static/bundle.js"></script>
  </body>    
</html>

Immer wenn ich den server, bekomme ich eine Fehlermeldung von der Art:

Cannot GET /css/bootstrap.min.css

Hier ist die webpack.config.js:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['react-hot', 'babel'],
      include: path.join(__dirname, 'src')
    },
    {
      test: /\.css$/,
      loader: 'style!css'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.json']
  }
};

Alles andere funktioniert einwandfrei, das problem ist nur bootstrap. Ich habe versucht, eine Menge von verschiedenen Variationen der Konfigurationen, aber ich kann nicht ankommen es zu wirken.

Ich habe auch versucht, dass Sie direkt von javascript aus auf index.js:

import '../css/bootstrap.min.css';

Und ich bekomme diese Fehlermeldung:

ERROR in ./~/css-loader!./css/bootstrap.min.css
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/glyphicons-halflings-regular.eot in /home/lhahn/dev/javascript/sha/css
 @ ./~/css-loader!./css/bootstrap.min.css 6:3278-3330 6:3348-3400

Bearbeiten

Aus, was ich merkte, webpack versucht, eine schriftart zu finden die Datei in meinem Projekt, wenn Sie versuchen, zu importieren Bootstrap.min.css.

InformationsquelleAutor lhahn | 2016-01-17
  1. 11

    Scheint es, dass webpack nicht geladen werden können font-Dateien.

    1. Hinzufügen file-loader via npm zu Ihrem Projekt und speichern Sie es als devDependencies.

      npm install file-loader --save-dev

    2. Und ändern Sie den Modul-loader-Konfiguration in Ihrer webpack.config.js

      {
  test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
  loader: 'file-loader',
}

    Versuchen, die Installation bootstrap durch npm, auch daran denken, jquery, seine Abhängigkeit

    • Ich installierte mit npm install file-loader --save-dev, aber der Fehler weiterhin besteht
    • Gleiche webpack Fehler bei der gleichen Datei?
    • ja, ich aktualisiert die Frage. Ich bekomme auch fünf dieser Fehler, zu sagen, dass es nicht möglich war, zu finden, die Schriften auf meinem root-Verzeichnis.
    • Ist bootstrap installiert über npm?
    • Nein, ich habe gerade heruntergeladen
    • Versuchen Sie, ihn durch npm, auch daran denken, jquery, seine Abhängigkeit
    • Vielen Dank, es funktioniert!
    • Sie sind herzlich willkommen!
    • Die eine funktionierte genau? Hochladen können Sie den gesamten code irgendwo?
    • Das war hilfreich, aber erstellt eine Reihe von Dateien, junk-Dateien. Ich empfehle, mit { test: [/\.woff?$/, /\.woff2?$/, /\.ttf?$/, /\.eot?$/, /\.svg?$/], loader: 'url-loader' }

    InformationsquelleAutor Matteo Basso
  2. 4

    Das, was ich haben, um für Bootstrap arbeiten mit Webpack:

    {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}

    und 

    import 'bootstrap/dist/css/bootstrap.css';

    Auch, wenn Sie mit Bootstrap lokal, Sie müssen fonts Ordner, mit Bootstrap Schriftarten auf der gleichen Ebene wie css Ordner. Es ist am besten, um npm zu vermeiden, all diese Probleme.

    • leider bekomm ich jetzt diese Fehlermeldung: ERROR in ./~/css-loader!./~/bootstrap/dist/css/bootstrap.css Module not found: Error: Cannot resolve module 'url' in /home/lhahn/dev/javascript/sha/node_modules/bootstrap/dist/css @ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.css 6:4622-4676
    • sicher, die Ursache zu installieren, müssen Sie die url-loader npmjs.com/package/url-loader
    • Für uns Anfänger, wo, diese Dinge tun zu gehen? Die Schrift be-Linien sind für webpack.config.js. Die importieren ?
    • href="https://webpack.js.org/concepts/#loaders" >webpack.js.org/concepts/#loaders
    InformationsquelleAutor krl
  3. 1

    im Vergleich zu @krl Antwort. dies ist, was ich unter Module rules im
    https://github.com/AngularClass/angular2-webpack-starter/blob/master/config/webpack.common.js

    nachdem $ npm install style-loader css-loader url-loader --save-dev

    {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'file-loader'},
{test: /\.(woff|woff2)$/, use: 'url-loader?prefix=font/&limit=5000'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=image/svg+xml'}
    InformationsquelleAutor Dirk Hoffmann
  4. 0

    Bootstrap hat eine Anzahl von unterschiedlichen Dateien/Schriften/Bilder, die Bedürfnisse der spezifischen Lader. Prüfen Sie, ob alle Lader in der folgenden Liste vorhanden sind, wenn nicht npm installieren Sie Sie wie devDependencies und in webpack.config.js als : 

    loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.html$/,
                loader: "html"
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            }, {
                test: /\.txt$/,
                loader: 'raw-loader'
            }, {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
                loader: 'url-loader?limit=10000'
            }, {
                test: /\.(eot|ttf|wav|mp3)$/,
                loader: 'file-loader'
            }
        ]

    - Und in deiner main/entry Datei, also index.js/app.js enthalten bootstrap-css als :

    import 'bootstrap/dist/css/bootstrap.css'

    Diese Konfiguration ist nur für die Verwendung von bootstrap-css-Datei mit ReactJS.

    InformationsquelleAutor vashishatashu
Schreibe einen Kommentar