Web-загрузчик с загрузочным устройством

Question

Я только что получил голову в webpack, но теперь он подпрыгнул, когда я пытаюсь включить bootstrap-sass из файла index.scss.

Это WebPack конф отлично работает и выводит файл .css в CSS/stylehseet.css

'use strict'; 

var path = require('path'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: { 
     stylesheet: path.resolve(__dirname, 'scss/index.scss') 
    }, 
    output: { 
     path: path.resolve(__dirname), 
     filename: 'bundle.bootstrap-sass.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract(
        'style', // backup loader when not building .css file 
        'css!sass' // loaders to preprocess CSS 
       ) 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('css/[name].css') 
    ], 
    resolve: { 
     modulesDirectories: [ 
      './node_modules' 
     ] 
    } 
}; 

Проблема заключается в том, в index.scss я должен включать самозагрузки-дерзость. index.scss, которые в соответствии с https://www.npmjs.com/package/sass-loader#imports добавления и WebPack ~ должны затем решить все:

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; 
@import "~bootstrap-sass/assets/stylesheets/bootstrap"; 

Проблема в моих попытках это не так: /. Я получаю результат:

Hash: b59b46e5946e7ab3d888 
Version: webpack 1.13.3 
Time: 1852ms 
        Asset Size Chunks    Chunk Names 
bundle.bootstrap-sass.js 171 kB  0 [emitted] css 
    + 9 hidden modules 

ERROR in ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot 
Module parse failed: /mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot Unexpected character '�' (1:0) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected character '�' (1:0) 
    at Parser.pp$4.raise (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:2221:15) 
    at Parser.pp$7.getTokenFromCode (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:2756:10) 
    at Parser.pp$7.readToken (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:2477:17) 
    at Parser.pp$7.nextToken (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:2468:15) 
    at Parser.parse (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:515:10) 
    at Object.parse (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:3098:39) 
    at Parser.parse (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/webpack/lib/Parser.js:902:15) 
    at DependenciesBlock.<anonymous> (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/webpack/lib/NormalModule.js:104:16) 
    at DependenciesBlock.onModuleBuild (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10) 
    at nextLoader (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25) 
    at /mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5 
    at Storage.finished (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16) 
    at /mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/graceful-fs/graceful-fs.js:78:16 
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:445:3) 
@ ./~/css-loader!./~/sass-loader!./scss/index.scss 6:4172-4253 6:4276-4357 

ERROR in ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2 
..... etc etc 

Webpack довольно мощный, но это делает вас вокруг дома, чтобы идти ... Это мой package.json файл

{ 
    "name": "webpack-demo", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "John Carmichael", 
    "license": "ISC", 
    "dependencies": { 
    "bootstrap-sass": "^3.3.6" 
    }, 
    "devDependencies": { 
    "css-loader": "^0.25.0", 
    "extract-text-webpack-plugin": "latest", 
    "node-sass": "^3.11.2", 
    "sass-loader": "^4.0.2", 
    "style-loader": "^0.13.1", 
    "webpack": "^1.13.3" 
    } 
} 

Есть ли что-то незначительное я пропало без вести, что кто-то может заметить :)?

Answer 1

ERROR in ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot 
Module parse failed: /mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot Unexpected character '�' (1:0) 
You may need an appropriate loader to handle this file type. 

У вас возникли проблемы.

Компилятор пытается загрузить файл шрифта .eot, но он не знает, что с ним делать, потому что вы не использовали соответствующий загрузчик.

Во-первых, installl file-loader и url-loader в ваших зависимостей Дев, например, так: npm install file-loader url-loader -D

Затем добавьте их в своих погрузчиков

{ 
    test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
    loader: 'url-loader?limit=10000&mimetype=application/font-woff' 
}, 
{ 
    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
    loader: 'url-loader?limit=10000&mimetype=application/octet-stream' 
}, 
{ 
    test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
    loader: 'file-loader' 
}, 

Таким образом, вы будете иметь возможность загружать большинство типов fonts