2017-01-06 4 views
1

У меня в настоящее время проблема с webpack имеет проблемы где-то .. и я не могу ее найти. Я использую Angular2 + Webpack2 + AwesomeTypescriptLoader. Приложение запущено, но webpack не перекомпилирует мое приложение правильно. Всякий раз, когда я меняю TS-файл в моем проекте я получаюWebpack2/awesome-typescript загрузчик, похоже, не компилируется

[на-загрузчиком] Проверка началась в отдельном процессе ...

[ат-загрузчиком] Ok, 0,985 сек.

поэтому, похоже, это изменение, но мой выходной файл/js не обновляется. В тот момент, когда я запускаю tsc -w в фоновом режиме, все работает .. но это не должно быть необходимым, не так ли?

Может ли кто-нибудь указать мою ошибку? Большое спасибо!

Вот мои конфигурационные файлы:

TSconfig:

{ 
    "compilerOptions": { 
    //"inlineSourceMap": true, 
    //"inlineSources": true, 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "target": "es5", 
    "sourceMap": true, 
    "rootDir": ".", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": true, 
    "noImplicitAny": false 
    }, 
    "exclude": [ 
    "bin", 
    "node_modules", 
    "wwwroot/dist" 
    ] 
} 

WebPack:

"use strict"; 
var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var path = require('path'); 
var CleanWebpackPlugin = require('clean-webpack-plugin'); 

module.exports = { 
    entry: { 
     "polyfills": path.resolve("./wwwroot/app/base/polyfills.ts"), 
     "app": path.resolve("./wwwroot/app/base/main.ts"), 
     "vendor": path.resolve("./wwwroot/app/base/vendors.ts") 
    }, 
    devtool: 'source-map', 

    output: { 
     filename: "[name].bundle.js", 
     chunkFilename: "[id].chunk.js", 
     path: "./wwwroot/dist/", 
     publicPath: "./dist/" 
    }, 
    watch: true, 
    resolve: { 
     extensions: ['', '.js', '.ts', '.html'] 
    }, 
    module: { 
     loaders: [ 
      //Typescript 
      { 
       test: /\.tsx?$/, 
       loaders: ['angular2-template-loader', 'awesome-typescript-loader'] 
      }, 
      // SASS 
      { 
       test: /\.scss$/, 
       loaders: ['style', 'css', 'sass'], 
       exclude: '/node_modules/' 
      }, 
      { 
       test: /\.html$/, 
       loaders: ['raw-loader'], 
       exclude: "./wwwroot/index.html" 
      }, 
      // Fonts & Files 
      { 
       test: /\.(ttf|eot|txt|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, 
       loader: 'file-loader', 
       exclude: '/node_modules/' 
      } 
     ] 
    }, 
    noParse: [/moment.js/], 

    plugins: [ 
     //new webpack.OldWatchingPlugin(), 
     // new webpack.optimize.UglifyJsPlugin({ 
     // compressor: { 
     //  warnings: false 
     // } 
     // }), 

     new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery" 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: ["app", "vendor", "polyfills"] 
     }), 

     new HtmlWebpackPlugin({ 
      template: './wwwroot/index.html' 
     }) 
    ] 
}; 

А версии, которые я использую:

{ 
    "version": "0.0.1", 
    "name": "someapp", 
    "private": true, 
    "dependencies": { 
    "@angular/common": "2.4.0", 
    "@angular/compiler": "2.4.0", 
    "@angular/core": "2.4.0", 
    "@angular/forms": "2.4.0", 
    "@angular/http": "2.4.0", 
    "@angular/material": "2.0.0-beta.1", 
    "@angular/platform-browser": "2.4.0", 
    "@angular/platform-browser-dynamic": "2.4.0", 
    "@angular/router": "3.4.0", 
    "@types/hammerjs": "^2.0.34", 
    "@types/lodash": "^4.14.34", 
    "angular2-color-picker": "^1.3.0", 
    "core-js": "^2.4.1", 
    "html-webpack-plugin": "^2.16.2", 
    "jquery": "^2.2.0", 
    "lodash": "^4.15.0", 
    "moment": "^2.14.1", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.1", 
    "tablesorter": "2.25.5", 
    "webpack": "1.13.2", 
    "zone.js": "0.7.2" 
    }, 
    "devDependencies": { 
    "angular2-template-loader": "^0.5.0", 
    "awesome-typescript-loader": "3.0.0-beta.17", 
    "raw-loader": "^0.5.1", 
    "clean-webpack-plugin": "^0.1.9", 
    "css-loader": "^0.23.1", 
    "html-loader": "^0.4.3", 
    "node-sass": "^4.1.1", 
    "sass-loader": "^4.1.1", 
    "style-loader": "^0.13.1", 
    "typescript": "2.0.10", 
    "typings": "1.3.3" 
    } 
} 

EDIT: Это то же самое с webpack 2.2.0-rc.4 btw.

ответ

0

См. awesome-typescript-loader и angular2-template-loader.

loaders: [ 
    { 
     test: /\.ts$/, 
     loaders: ['awesome-typescript-loader', 'angular2-template-loader'], 
     exclude: [/\.(spec|e2e)\.ts$/] 
    }, 
    ... 
] 

Попробуйте переместить «awesome-typescript-loader» на передний план. Если это не сработает, могут возникнуть другие незначительные проблемы с конфигурацией вашего веб-пакета. Надеюсь, это поможет. У меня также есть проблемы с этим файлом, и это может быть очень раздражает, чтобы найти решения в Интернете ...

+0

Кроме того, решительность содержит '.ts', но не' .tsx». Оба примера имеют «.ts», «.tsx», «.js», «.jsx». – Kody

+0

Это ничего не меняет :(Я до сих пор получаю сообщение о том, что AT-Loader, похоже, распознает мое изменение («[at-loader] Проверка началась в отдельном процессе ... & [at-loader] Ok, 0.985 sec.), но мой пакет, похоже, не обновляется :( –

+0

А, ладно. Я могу только догадываться, что в данном случае это небольшое несоответствие. Что-то еще, что вы могли бы попробовать, это следовать приведенным в списке примерам и запускать проект bare-bones как вы ожидаете, затем перенести эти изменения в свое приложение. Отбросьте версии своего приложения и добавьте обратно только то, что вам нужно. – Kody

-2

У меня была такая же проблема, и решить ее, когда я изменил расширения разрешать в webpack.config.js от:

resolve: { 
    extensions: ['', '.js', '.ts'] 
}, 

к:

resolve: { 
    extensions: ['', '.ts', '.tsx', '.js', '.jsx'] 
}, 

 Смежные вопросы

  • Нет связанных вопросов^_^