在Webpack中使用Bootstrap

Question

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

我尝试通过url-loader加载Bootstrap和Font Awesome.我引用了以下网址:

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.

的WebPack

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>

HtmlWebpackPlugin如果不想插入bundle.styles.css和bundle.js手动,您可以使用.