javascript - 将 Bootstrap 与 Webpack 结合使用

Question

我有一个使用 Webpack 的应用程序。我是 Webpack 的新手，正在尝试学习如何有效地使用它。具体来说，我正在尝试将 Bootstrap with Font Awesome 导入到我的项目中。我找到了这个 SO post但是，我仍然无法使用 Bootstrap。我不确定它是否已过时，或者我是否误解了某些内容。

我尝试通过 url-loader 加载 Bootstrap 和 Font Awesome。我引用了以下 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 加载 Bootstrap 和 Font Awesome，然后在我的入口文件中引用它，如下所示:

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

这似乎应该是常用模板的一部分。但是，我没有找到。如何在 Webpack 中使用 Bootstrap 和 Font Awesome？

但是，我也对这种方法感到失望。

Answer 1

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

安装依赖npm install jquery bootstrap

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。