与Webpack一起使用靴带
我有一个使用Webpack的应用程序。我是Webpack的新手，我正在努力学习如何有效地使用它。具体来说，我正在尝试导入带有Font的引导程序到我的项目中。我找到了这个所以贴，但是，我仍然不能使用引导带。我不知道这是过时的，还是我误解了什么。
我试着通过url-加载程序加载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加载引导程序和字体，然后在输入文件中引用它，如下所示：
require('bootstrap');
require('font-awesome');这似乎应该是一个常用模板的一部分。不过，我找不到。Webpack如何使用Bootstrap和Font？
然而，我也缺乏这种方法。
回答 2
Stack Overflow用户
发布于 2017-07-08 19:08:55
我在GitHub上创建了一个简单的示例。Webpack 2和靴带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>如果不想手动插入bundle.styles.css和bundle.js，可以使用bundle.js。
Stack Overflow用户
发布于 2017-07-08 13:10:34
如果您不动态生成基本HTML文件，那么您可以在基html的head部分中对称地包含一个<link>标记(意味着到处都是相同的基html文件)
如果你想用webpack来使用它，那么和url加载器一起使用，你需要使用style-loader和css-loader (如果你想在头女巫中插入style标签可能不是这样)。
或者您可以使用webpack的extract to text插件作为一个不同的文件加载并使用html link标记插入它。
作为参考，您可以使用此开源项目的信任迁移文件
和
编辑:链接更新
https://stackoverflow.com/questions/44925969
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号