您现在的位置:首页 >> 前端 >> 内容

webpack封装bootstrap

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

  核心提示:一、安装# 第1步安装bootstrap-loadernpm install bootstrap-loader --save如果安装完毕,提示有些依赖的loader没有安装,要把它们装上。# 第2步安...

一、安装

# 第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"
    },
        ]        
    },

Tags:WE EB BP PA 
作者:网络 来源:linyeban的博