Webpack/Angular - Materialize not loading

Question

Я загрузил стартер Asp.net & Angular2 project here. Я пытаюсь добавить материализацию в свой проект, но, похоже, загрузка не выполняется, когда я запускаю проект. Как правильно настроить материализацию с помощью webpack и/или Angular, требуется ли специальный погрузчик? Спасибо, ребята, я новичок в webpack.

Package.json

{ 
    "name": "First", 
    "version": "0.0.0", 
    "devDependencies": { 
    "aspnet-webpack": "^1.0.6", 
    "bootstrap": "^3.3.6", 
    "css-loader": "^0.23.1", 
    "expose-loader": "^0.7.1", 
    "extendify": "^1.0.0", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "file-loader": "^0.8.5", 
    "jquery": "^2.2.1", 
    "raw-loader": "^0.5.1", 
    "style-loader": "^0.13.0", 
    "ts-loader": "^0.8.1", 
    "typescript": "^1.8.2", 
    "url-loader": "^0.5.7", 
    "webpack": "^1.12.14", 
    "webpack-hot-middleware": "^2.10.0" 
    }, 
    "dependencies": { 
    "@angular/common": "2.0.0-rc.4", 
    "@angular/compiler": "2.0.0-rc.4", 
    "@angular/core": "2.0.0-rc.4", 
    "@angular/http": "2.0.0-rc.4", 
    "@angular/platform-browser": "2.0.0-rc.4", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.4", 
    "@angular/platform-server": "2.0.0-rc.4", 
    "@angular/router": "3.0.0-beta.2", 
    "angular2-universal": "^0.104.5", 
    "aspnet-prerendering": "^1.0.2", 
    "css": "^2.2.1", 
    "es6-shim": "^0.35.1", 
    "isomorphic-fetch": "^2.2.1", 
    "materialize-css": "^0.97.7", 
    "preboot": "^2.0.10", 
    "rxjs": "5.0.0-beta.6", 
    "webpack-externals-plugin": "^1.0.0", 
    "zone.js": "^0.6.12" 
    } 
} 

wepback.config.vendor

var path = require('path'); 
var webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var extractCSS = new ExtractTextPlugin('vendor.css'); 
var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development'; 

module.exports = { 
    resolve: { 
     extensions: [ '', '.js' ] 
    }, 
    module: { 
     loaders: [ 
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }, 
      { test: /\.css/, loader: extractCSS.extract(['css']) } 
     ] 
    }, 
    entry: { 
     vendor: [ 
      'bootstrap', 
      'bootstrap/dist/css/bootstrap.css', 
      'materialize-css', 
      'es6-shim', 
      'style-loader', 
      'jquery', 
      '@angular/common', 
      '@angular/compiler', 
      '@angular/core', 
      '@angular/http', 
      '@angular/platform-browser', 
      '@angular/platform-browser-dynamic', 
      '@angular/router', 
      '@angular/platform-server', 
     ] 
    }, 
    output: { 
     path: path.join(__dirname, 'wwwroot', 'dist'), 
     filename: '[name].js', 
     library: '[name]_[hash]', 
    }, 
    plugins: [ 
     extractCSS, 
     new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.DllPlugin({ 
      path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), 
      name: '[name]_[hash]' 
     }) 
    ].concat(isDevelopment ? [] : [ 
     new webpack.optimize.UglifyJsPlugin({ 
      compress: { warnings: false }, 
      minimize: true, 
      mangle: false // Due to https://github.com/angular/angular/issues/6678 
     }) 
    ]) 
}; 

home.hmlt

<div class="row"> 
     <div class="col s12 m6"> 
      <div class="card blue-grey darken-1"> 
       <div class="card-content white-text"> 
        <span class="card-title">Card Title</span> 
        <p>I am a very simple card. I am good at containing small bits of information. 
        I am convenient because I require little markup to use effectively.</p> 
       </div> 
       <div class="card-action"> 
        <a href="#">This is a link</a> 
        <a href="#">This is a link</a> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

Вы пытались пользователю materilize-CSS Webpack погрузчик: https://github.com/Zevran/materialize-loader Фрагменты со своего сайта (после вас npm i -D материализовать-погрузчик URL-погрузчик файл-загрузчик):

1. Загрузка шрифта конфигурации: loaders: [ { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader:"url?limit=10000&mimetype=application/font-woff" }, { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file" } ]
2. требуют материализации: require("materialize-loader");