webpack封装bootstrap

最新推荐文章于 2025-05-30 09:00:39 发布

原创最新推荐文章于 2025-05-30 09:00:39 发布 · 645 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何使用webpack封装和配置Bootstrap，解决在打包过程中遇到的字体文件和非法字符错误，提供了一条学习人工智能的资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先给大家分享一个巨牛巨牛的人工智能教程，是我无意中发现的。教程不仅零基础，通俗易懂，而且非常风趣幽默，还时不时有内涵段子，像看小说一样，哈哈～我正在学习中，觉得太牛了，所以分享给大家！点这里可以跳转到教程

一、安装

# 第1步安装bootstrap-loader
npm install bootstrap-loader --save
如果安装完毕，提示有些依赖的loader没有安装，要把它们装上。
# 第2步安装bootstrap
如果你使用的是Bootstrap3
npm install bootstrap-sass --save
#如果你使用的是Bootstrap4，注意上官网检查一下最新的版本。
npm install bootstrap@v4.0.0-alpha.5 --save
# 第3步安装其他样式处理loader
npm install css-loader node-sass resolve-url-loader sass-loader style-loader url-loader --save
# 如果你使用的是Bootstrap 4,可能会需要安装个loader
npm install postcss-loader --save

二、使用
如果在js中直接使用，那么：
require('bootstrap-loader');

如果想打包，那么：
    entry : {
         'bootstrap': 'bootstrap-loader'
    },

三、除错

　　如果打包时，报很多红色的错误，什么.eot文件中有非法字符， Unexpected character '�'，云云。

类似：

　　这个是由于没有设置字体的加载器，设置一下就可以了。

    module: {        // 加载器配置        loaders: [            {            test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,            loader: 'url?limit=10000&mimetype=application/font-woff'        }, {            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,            loader: 'url?limit=10000&mimetype=application/octet-stream'        }, {            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,            loader: 'file'        }, {            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,            loader: "url?limit=10000&mimetype=image/svg+xml"        },        ]            },

浏览人工智能教程