Question

我试图通过webpack使用bootstrap并使用npm安装它。我想在我的反应项目中使用它，所以我已完成以下设置，但我一直收到以下错误：

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

意外的令牌是什么？那是因为我的装载机无法正常工作吗？

Answer 1

我测试了你的代码并且加载器没有任何问题但是这行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包并行加载的。希望对你有所帮助。

Answer 2

你不必将bootstrap作为npm模块包含在内。您可以下载或使用CDN在您的html模板中包含引导程序。然后，您可以使用＆＃39; className＆＃39;将其应用于您的组件。属性而不是＆＃39; class＆＃39;。试试吧。

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

并在你的html文件中：

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

此方法与下载引导程序文件相同，以改善延迟。

Webpack缺少引导程序的加载程序

2 个答案:

它是如何工作的？

安装

在webpack中配置

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

它是如何运作的