web-dev-qa-db-ja.com

bootstrap Webpackで動作させることはできません

webpack-dev-serverを使用していて、ブートストラップを含めようとしています。

私はこのプロジェクト構造を持っています：

── 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

これは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>

サーバーを実行するたびに、次のタイプのエラーが発生します。

Cannot GET /css/bootstrap.min.css

これが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']
  }
};

他のすべては正常に機能します。問題はブートストラップだけです。さまざまな構成のバリエーションを試しましたが、機能しません。

また、index.jsのjavascriptから直接要求してみました。

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

そして、私はこのエラーを受け取ります：

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

編集

私が気付いたところによると、webpackは、Bootstrap.min.cssをインポートしようとしたときに、プロジェクト内のフォントファイルを見つけようとしています。

javascripttwitter-bootstrapwebpackwebpack-dev-serverwebpack-style-loader
7
lhahn

Webpackはフォントファイルを読み込めないようです。

  1. 追加 file-loader npm経由でプロジェクトにアクセスし、devDependenciesとして保存します。

    npm install file-loader --save-dev

  2. そして、webpack.config.jsのモジュールローダー構成を変更します

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

bootstrap through npmをインストールしてみてください。jquery、その依存関係も覚えておいてください。

11
Matteo Basso

これは、Bootstrapが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'}

そして

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

また、ローカルでBootstrapを使用している場合は、fontsフォルダーと同じレベルのBootstrapフォントを含むcssフォルダーが必要です。この問題をすべて回避するには、npmを使用することをお勧めします。

4
krl

@krlの回答と比較して。これは私がモジュールrulesの下に置いたものです https://github.com/AngularClass/angular2-webpack-starter/blob/master/config/webpack.common.js

した後 $ 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'}
1
Dirk Hoffmann

ブートストラップには、特定のローダーを必要とするさまざまなファイル/フォント/画像があります。次のリストのすべてのローダーが存在するかどうかを確認します。存在しない場合は、それらをdevDependenciesとしてインストールし、webpack.config.jsに次のように追加します。

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'
            }
        ]

そして、メイン/エントリファイル、つまりindex.js /app.jsにbootstrap css as：

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

この構成は、ReactJSでbootstrap cssを使用するためだけのものです。

0
vashishatashu