本文详解在Webpack项目中引入Bootstrap的方法。除了基础的npm安装，重点解析处理字体文件所需的url-loader配置，以及通过ProvidePlugin插件自动加载jQuery以支持Bootstrap JS插件的完整步骤，并包含一个解决css-loader报错的特殊技巧。
Webpack引入Bootstrap概述
Bootstrap已成为业界广泛采用的前端界面标准，大量网站依赖其构建。通过Webpack管理Bootstrap的CSS资源，可以实现仅使用npm install命令即可完成项目依赖安装，从而避免手动在HTML文件中添加引用的繁琐操作。
起初认为只需在项目的入口文件中添加一行引入代码即可实现。
Bootstrap CSS及字体文件配置
import 'bootstrap/dist/css/bootstrapcss'随后执行依赖安装命令。
npm i bootstrap url url-loader style-loader css-loader --save实际操作比预期复杂，因为Bootstrap的CSS文件中引用了多种字体文件和矢量图标。要正确引入这些资源，必须配置处理CSS之外类型文件的对应loader。
//webpackconfigjs:
moduleexports = {
entry: {
'js'
},
output: {
filename: 'bundlejs'
},
module: {
loaders: [
{ test: /\css$/, loader: 'style-loader!css-loader' },
{ test: /\eot(\?v=\d+\\d+\\d+)?$/, loader: "file" },
{ test: /\(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" },
{ test: /\ttf(\?v=\d+\\d+\\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\svg(\?v=\d+\\d+\\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
]
}
};
在HTML文件中编写少量Bootstrap示例代码进行测试。
Bootstrap界面验证
// chtml
<html>
<body>
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
<li role="presentation"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Profile</a></li>
<li role="presentation"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Messages</a></li>
</ul>
<script type="text/javascript" src="bundlejs"></script>
</body>
</html>
再次执行Webpack转译构建过程。
检查Webpack的输出结果。
在浏览器中打开页面查看效果。
使用命令open chtml打开本地HTML文件。
页面成功渲染出Bootstrap标志性的界面样式。
引入jQuery依赖。
若需使用Bootstrap的JavaScript插件，必须预先引入jQuery。一种推荐做法是利用Webpack插件来处理jQuery的加载。
首先通过npm安装jQuery库。
jQuery依赖引入与插件配置
npm i jquery接着修改Webpack配置文件，添加插件配置以装入jQuery。
plugins: [
new webpackProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]在入口文件中添加验证代码以确认加载情况。
$("body")append("<div>hello world</div>")若验证成功，表明jQuery已正确加载。此时即可在入口JS文件中进一步加载Bootstrap的JavaScript文件。
Bootstrap JS加载与错误排查
import 'bootstrap/dist/js/bootstrapjs'常见错误排查。
在引入Bootstrap过程中，可能会遇到Webpack转译时css-loader报出unknown word类型的错误。针对此问题，可在webpackconfigjs文件中为相关规则添加include属性，并将其指向一个不存在的目录路径，以此作为规避手段。
{
test: /\css$/,
include: [
pathresolve(__dirname, "not_exist_path")
],
loader: "style!css"
}原始Issue讨论链接：https://githubcom/webpack/cs 。初次看到该解决方案时，曾怀疑是否为玩笑。
以上即为本文的全部内容，希望对各位的学习有所启发，也欢迎继续支持本站。