Javascript 在Webpack中使用Bootstrap

我有一个使用Webpack的应用程序。我对Webpack还不熟悉，正在努力学习如何有效地使用它。具体地说，我正在尝试将Font Awesome引导程序导入到我的项目中。我发现了这个，但是，我仍然无法使用引导。我不确定它是否过时，或者我是否误解了什么

我尝试通过url加载器加载引导和字体。我引用了以下URL：

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

我还尝试通过NPM加载引导程序和字体，然后在我的输入文件中引用它，如下所示：

require('bootstrap');
require('font-awesome');

看起来这应该是常用模板的一部分。然而，我没有找到一个。如何在Webpack中使用引导和字体

---

然而，我也没有想到这种方法

如果您不是动态生成基本HTML文件，那么您可以在基本HTML的头部分中包含一个

标记（表示所有地方都是相同的基本HTML文件）

如果您想使用webpack使用它，那么在使用url加载器的同时，您需要使用

样式加载器

和

css加载器

（如果您想将样式作为

样式

标签插入头部，则可能不是这样）

或者，您可以使用webpack的

提取到文本

插件将其作为不同的文件加载，并使用html

链接

标记将其插入

作为参考，您可以使用此开源项目的配置文件

及

---

编辑：链接更新

我在上创建了一个简单的示例。使用Webpack 2和Bootstrap 3

安装依赖项

npm安装jquery引导

index.js

require('bootstrap');
require('bootstrap/dist/css/bootstrap.css');
require('font-awesome/css/font-awesome.css'); //Optional. The question author uses this package.

网页包

const webpack = require('webpack');
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: path.resolve(__dirname, "index.js"),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js"
    },
    module: {
        rules: [    
            {
                test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
                use: [{
                    loader: "file-loader"
                }]
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('bundle.styles.css'),
        new webpack.ProvidePlugin({
            // inject ES5 modules as global vars
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        })
    ]
};

index.html

<link rel="stylesheet" type="text/css" href="/dist/bundle.styles.css">
<script type="text/javascript" src="/dist/bundle.js"></script>



如果您不想手动插入
bundle.styles.css
和
bundle.js
，可以使用
HtmlWebpackPlugin
。
为什么不工作
require（'bootstrap'）；要求（'font-awesome'）在条目文件中？你有什么错误吗？你能添加网页配置文件吗？@StanislavMayorov当我做
require（'bootstrap'）引导CSS根本不加载。我使用
npm安装引导程序--save dev
安装引导程序。我可以在
node\u modules
目录中看到
bootstrap
。我可以使用输入文件中的
require（'bootstrap'）
从命令行成功运行
webpack
。但是，当我访问网页时，CSS并没有加载。您必须在配置中添加CSS和字体的加载程序。不要忘记导入jquery，因为它需要引导。@StanislavMayorov我的配置文件中有
css加载程序
和
url加载程序
。但是，我没有看到加载程序中列出任何特定于字体的加载程序：。您是否尝试过为引导和字体应用程序安装npm软件包？这将把文件放入
node\u模块中
，您应该能够导入或需要它们。为什么不加载更少的文件而不是css？@yevgeniyafanasysev，因为这将增加构建时间。作者不想使用引导变量。如果需要，您可以使用较少的加载程序并添加较少的加载程序。Bootstrap 3不需要tether.js。这是Bootstrap 4的要求。链接已断开