站内搜索:
首页 >> 前端 >> 内容
webpack封装bootstrap

时间:2017/2/9 9:53:00

一、安装

# 第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 '?',云云。

类似:webpack封装bootstrap

  这个是由于没有设置字体的加载器,设置一下就可以了。
    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"
    },
        ]        
    },

  • 上一篇:获取随机数
  • 下一篇:JS如何调用函数内部变量?
  • 返回顶部