人人IT網

人人IT網

當前位置: 主頁 > 編程語言 > C >

webpack打包bootstrap

時間:2016-12-01 12:13來源:Internet 作者:Internet 點擊:
使用bootstrap-loader,官網上說得很明白,官網地址:https://github.com/shakacode/bootstrap-loader,搬到這裏記錄一下: 一、安裝 # 第1
使用bootstrap-loader,官網上說得很明白,官網地址:https://github.com/shakacode/bootstrap-loader,搬到這裏記錄一下:

一、安裝

# 第1步安裝bootstrap-loader
npm install bootstrap-loader --save
如果完善完畢,提示有些loader沒有安裝,再把它們裝上。

# 第2步 如果你使用的是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,可能會需要
npm install postcss-loader --save

二、使用
如果js中直接使用,那麼:
require('bootstrap-loader');

如果想打包,那麼:
    entry : {
        'app': './js/view/main/app.js',
        'bootstrap': 'bootstrap-loader'
    },

三、除錯
  如果打包時,報很多紅色的錯誤,什麼.eot文件中有非法字符, Unexpected character '�',雲雲。
  這個是由於沒有設置字體的加載器,設置一下就可以了。
    module: {
        // 加載器配置
        loaders: [
        {test: /\.css$/,loader: 'style-loader!css-loader'},
        {test: /\.js$/,loader: 'babel-loader!jsx-loader?harmony'},
{test: /\.(png|jpg|gif)$/,loader: 'file?name=[name].[ext]?[hash]'},
{test: /\.eot/,loader : 'file?prefix=font/'},
{test: /\.woff/,loader : 'file?prefix=font/&limit=10000&mimetype=application/font-woff'},
{test: /\.ttf/, loader : 'file?prefix=font/'},
{test: /\.svg/, loader : 'file?prefix=font/'},
        ]       
    },

四、網頁
  打包輸出中指定了bootstrap打包結果的文件,如果使用html自動生成插件,則修改配置,如果沒有使用,在html文件中增加<script>就可以了。


From:ITEYE
頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
發表評論
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
評價:
表情:
驗證碼:點擊我更換圖片
欄目列表
推薦內容