无法使引导程序与 Webpack 一起工作答案

【问题标题】：Cannot make bootstrap work with Webpack无法使引导程序与 Webpack 一起工作
【发布时间】：2016-04-22 19:02:18
【问题描述】：

我正在使用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

编辑

据我所知，当尝试导入 Bootstrap.min.css 时，webpack 正在尝试在我的项目中查找字体文件。

【问题讨论】：

标签： javascript twitter-bootstrap webpack webpack-dev-server webpack-style-loader

【解决方案1】：

webpack 似乎无法加载字体文件。

通过 npm 将file-loader 添加到您的项目中，并将其保存为 devDependencies。
```
npm install file-loader --save-dev
```

并修改 webpack.config.js 中的模块加载器配置

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

尝试通过 npm 安装引导程序，还记得 jquery，它的依赖项

【讨论】：

我安装了npm install file-loader --save-dev，但错误仍然存在
是的，我更新了问题。我也收到了五个这样的错误，说在我的根目录中找不到字体。
bootstrap 是通过 npm 安装的吗？
尝试通过npm安装，还记得jquery，它的依赖
究竟哪一个有效？你能把整个代码上传到某个地方吗？

【解决方案2】：

这是我为了让 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 文件夹，其中包含与css 文件夹处于同一级别的Bootstrap 字体。最好使用npm 来避免所有这些麻烦。

【讨论】：

很遗憾现在我收到了这个错误：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
当然，因为你需要安装 url loader npmjs.com/package/url-loader
对于我们初学者来说，这些东西去哪里？字体加载行用于 webpack.config.js。导入？

【解决方案3】：

与@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'}

【讨论】：

【解决方案4】：

Bootstrap 有许多需要特定加载器的不同文件/字体/图像。检查以下列表中的所有加载器是否存在，如果没有，npm 将它们安装为 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 包括引导 css 为：

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

此配置仅用于将引导 css 与 ReactJS 一起使用。

【讨论】：