Javascript Web包缺少用于引导的加载程序

我试图通过webpack使用引导，并使用npm安装了它。我想在我的react项目中使用它，因此我已进行了以下设置，但我不断收到以下错误：

main.js

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

控制台错误

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$4.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$1.parseExpressionStatement (/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:966:10)
    at Parser.pp$1.parseStatement (/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:730:24)
    at Parser.pp$1.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

模块解析失败：/Users/jlei/Desktop/pokeapp/node_modules/bootstrap/dist/css/bootstrap.css意外令牌（7:5）
您可能需要适当的加载程序来处理此文件类型。
SyntaxError:意外标记（7:5）
在Parser.pp$4.raise（/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:2221:15）
位于Parser.pp.unexpected（/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:603:10）
分号（/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:581:61）
在Parser.pp$1.parseExpressionStatement（/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:966:10）
Parser.pp$1.parseStatement（/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:730:24）
Parser.pp$1.parseTopLevel（/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:638:25）
在Parser.parse（/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:516:17）
在Object.parse（/Users/jlei/Desktop/pokeapp/node_modules/acorn/dist/acorn.js:3098:39）
在Parser.parse（/Users/jlei/Desktop/pokeapp/node_modules/webpack/lib/Parser.js:902:15）
在DependenciesBlock。（/Users/jlei/Desktop/pokeapp/node_modules/webpack/lib/NormalModule.js:104:16）
@./client/components/Main.js 27:0-43

---

意外的标记是什么？这是因为我的加载程序不工作吗？

您不必将引导程序作为npm模块。您可以下载或使用CDN在html模板中包含引导。然后，您可以使用“className”属性而不是“class”将其应用到组件上。试试看

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

在html文件中：

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

---

此方法与下载引导文件以提高延迟相同。

我测试了您的代码，加载程序没有问题，但是这一行

包含：path.join（\uu dirname，'client'）

会导致问题，如果您将其删除，您可以看到webpack中的引导捆绑很好。 为了从webpack中获得更多信息，您可能希望获得一个单独的css文件，然后可以使用ExtractTextPlugin来实现它

它是如何工作的？ 装置 在webpack中配置它 并将其添加到插件中

 new ExtractTextPlugin('yourStyle.css')

现在您应该在浏览器中有一个单独的css文件，而不是样式标记中的每个css 它是如何工作的 它将条目块中的每个require（“style.css”）移动到一个单独的css输出文件中。因此，您的样式不再内联到javascript中，而是在css包文件（styles.css）中分开。如果您的总样式表容量很大，那么速度会更快，因为样式表包是与javascript包并行加载的。

---

希望它能对你有所帮助。

确保你在网页包配置中包含“/node\u modules/bootstrap/dist/css”作为一个入口点谢谢，我想知道什么是

include:path.join（\u dirname，'client'）

这样做会把事情搞砸吗？我真的不太清楚，我从来没有使用过它，但这里有一个例子

npm i extract-text-webpack-plugin

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

 new ExtractTextPlugin('yourStyle.css')