bootstrap 的 Webpack 缺少加载程序

Question

我正在尝试通过 webpack 使用 bootstrap 并使用 npm 安装它。我想在我的 React 项目中使用它，所以我完成了以下设置，但我不断收到以下错误：

main.js

import React from 'react'
import 'bootstrap/dist/css/bootstrap.css'
const Main = () => (
    <div className="container">yo</div>
)

Webpack 配置

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

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/pokeapp'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
    // js
    {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'client')
    },
    // CSS
    {
      test: /\.css$/,
      include: path.join(__dirname, 'client'),
      loader: 'style-loader!css-loader'
    },
    { test: /\.(woff|woff2|eot|ttf|svg)$/, loader: 'url'}
    ]
  }
};

控制台错误

Module parse failed: /Users/jlei/Desktop/pokeapp/node_modules/bootstrap/dist/css/bootstrap.css Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (7:5)
    at Parser.pp.raise (/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp.semicolon (/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:581:61)
    at Parser.pp.parseExpressionStatement (/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:966:10)
    at Parser.pp.parseStatement (/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:730:24)
    at Parser.pp.parseTopLevel (/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/Users/jlei/Desktop/pokeapp/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/Users/jlei/Desktop/pokeapp/node_modules/webpack/lib/NormalModule.js:104:16)
 @ ./client/components/Main.js 27:0-43

什么是意想不到的令牌？是因为我的装载机不工作吗？

Answer 1

您不必将 bootstrap 作为 npm 模块包含在内。您可以下载或使用 CDN 将 bootstrap 添加到您的 html 模板中。然后，您可以使用 'className' 属性而不是 'class' 将它应用到您的组件上。试试吧。

app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css'));

并在您的 html 文件中：

<link rel="stylesheet" href="/css/bootstrap.min.css">

此方法与下载 bootstrap 文件以改善延迟相同。

Answer 2

我测试了你的代码，加载程序没有问题但是这一行 include: path.join(__dirname, 'client') 导致了问题，如果你删除它你可以看到 bootstrap 与 webpack 捆绑得很好。为了从 webpack 中获得更多，你可能需要一个单独的 css 文件，然后你可以使用 ExtractTextPlugin 来实现它。

它是如何工作的？

安装

npm i extract-text-webpack-plugin

在webpack中配置

{test: /\.css$/, loader:   ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader' })}

并将其添加到插件中

 new ExtractTextPlugin('yourStyle.css')

现在您应该在浏览器中有一个单独的 css 文件，而不是每个 css 样式标签

它是如何工作的

它将入口块中的每个 require("style.css") 移动到单独的 css 输出文件中。因此，您的样式不再内嵌到 javascript 中，而是在 css 捆绑文件 (styles.css) 中分开。如果您的样式表总量很大，它会更快，因为样式表包与 javascript 包并行加载。希望对你有帮助。

bootstrap 的 Webpack 缺少加载程序

Webpack missing loader for bootstrap

javascript

loader

twitter-bootstrap

twitter-bootstrap-3

webpack

它是如何工作的？

安装

在webpack中配置

现在您应该在浏览器中有一个单独的 css 文件，而不是每个 css 样式标签

它是如何工作的