2017-01-06 27 views
1

我目前的webpack安裝有問題..我找不到它。 我使用的是Angular2 + Webpack2 + AwesomeTypescriptLoader。應用程序已啓動並正在運行,但webpack不會正確重新編譯我的應用程序。每當我在我的項目更改TS文件,我得到Webpack2/awesome-typecript Loader似乎並沒有編譯

[在裝載機在一個單獨的進程正在檢查開始...

[在裝載機]好,0.985秒。

所以它似乎承認的變化,但我的bundle/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" 
    } 
} 

編輯:這是與webpack 2.2.0-rc.4 btw一樣。

回答

0

請參閱awesome-typescript-loaderangular2-template-loader

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

嘗試將'awesome-typescript-loader'移動到前面。如果這不起作用,你的webpack配置可能會有其他一些細微的問題。希望有所幫助。我也有這個文件的問題,它可以是很煩人的網上找到解決辦法......

+0

而且,決心包含 '的.ts',但不是' .tsx」。這兩個例子都有'.ts','.tsx','.js','.jsx''。 – Kody

+0

這並沒有改變任何東西:(我仍然得到AT-Loader似乎認出我的改變的消息('[at-loader]檢查在單獨的進程中開始...&[at-loader]好的,0.985秒。 )但是我的軟件包似乎沒有更新:( –

+0

啊,好吧,我現在只能猜測這是一些小的差異,你可以嘗試的其他東西是按照我列出的例子,並得到一個裸機項目運行如你所期望的那樣,然後將這些改變移植到你的應用程序中,放棄你的應用程序的版本並且只添加你所需要的版本 – Kody

-2

我有同樣的問題,解決它,當我改變了決心擴展在webpack.config.js來自:

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

到:

resolve: { 
    extensions: ['', '.ts', '.tsx', '.js', '.jsx'] 
}, 
相關問題