Webpack 2 + ExtractTexWebpacktPlugin =予期しないトークン

Question

Webpack 2とExtractTexWebpacktPluginを使用する際に問題が発生しています。マイWebPACKのコンフィグファイル：

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

console.log("==============================DEVELOPMENT================================"); 

module.exports = { 
    entry: { 
    app: [ "./src/main.ts" ] 
    }, 

    output: { 
    path: path.resolve(__dirname, "build"), 
    publicPath: "http://localhost:8000/build", 
    filename: "bundle.js" 
    }, 

    resolve: { 
    extensions: [ '.ts', '.js', '.json', '.css', '.less', '.html' ] 
    }, 

    stats: "verbose", 

    module: { 

    rules: [ 
     { 
     test: /\.ts$/, 
     loaders: [ 'awesome-typescript-loader' ], 
     exclude: [ /\.(spec)\.ts$/, /(node_modules)/ ] 
     }, 
     { 
     test: /\.js$/, 
     exclude: [/node_modules/], 
     use: [{ 
      loader: 'babel-loader', 
      options: { presets: ['es2015'] } 
     }], 
     }, 
     /*{ 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: "style-loader", 
      use: "css-loader" 
     }) 
     },*/ 
     { 
     test: /\.less$/, 
     use: ExtractTextPlugin.extract({ 
      fallbackLoader: 'style-loader', 
      use: ['css-loader', 'less-loader'] 
     }) 
     } 
    ] 

    }, 

    plugins: [ 
    new ExtractTextPlugin({ filename: '[name].css' }) 
    ], 

    devServer: { 
    port: 8000, 
    contentBase: "./src", 
    compress: true 
    }, 

    devtool: "inline-source-map" 
}; 

EDIT： 私は単純化されたstyle.lessをしただけで1ルールに：

h1 { 
    color: #0F9E5E; 
} 

この時間の誤差は次のように示していますUncaught SyntaxError: Unexpected token {

すべてがそうです標準的なシンプルな構成で、Webpackのマニュアルが続きます。 - それは変換されたCSSファイル内の最初のシンボルであるため、.出力として

import './assets/less/style.less'; 

import * as $ from 'jquery'; 

let h1 = $('h1');  
console.log(h1); 

私はUncaught SyntaxError: Unexpected token .を取得しています：これはmain.ts私はapp.lessをインポートしていますファイルです。だから、それは明らかにcssを解析していません。プラグインの

バージョン：

"webpack": "2.2.1", 
"style-loader": "0.13.1", 
"css-loader": "0.25.0", 
"extract-text-webpack-plugin": "^2.1.0", 

EDITED - ターミナルにログインします。

[at-loader] Checking started in a separate process... 
[at-loader] Ok, 0.073 sec. 
Hash: c988ce477e8a4adc8c3d 
Version: webpack 2.2.1 
Time: 2633ms 
    Asset  Size Chunks     Chunk Names 
bundle.js  709 kB  0 [emitted] [big] app 
    app.css 204 bytes  0 [emitted]   app 
chunk {0} bundle.js, app.css (app) 234 kB [entry] [rendered] 
    [34] ./src/main.ts 286 bytes {0} [built] 
    [35] (webpack)-dev-server/client?http://localhost:8000 3.97 kB {0} [built] 
    [36] (webpack)/hot/dev-server.js 1.57 kB {0} [built] 
    [39] ./~/events/events.js 8.33 kB {0} [built] 
    [40] ./src/assets/less/style.less 41 bytes {0} [built] 
    [42] ./~/punycode/punycode.js 14.7 kB {0} [built] 
    [45] ./~/querystring-es3/index.js 127 bytes {0} [built] 
    [48] ./~/sockjs-client/lib/entry.js 244 bytes {0} [built] 
    [74] ./~/strip-ansi/index.js 161 bytes {0} [built] 
    [76] ./~/url/url.js 23.3 kB {0} [built] 
    [77] ./~/url/util.js 314 bytes {0} [built] 
    [78] (webpack)-dev-server/client/socket.js 856 bytes {0} [built] 
    [80] (webpack)/hot/emitter.js 77 bytes {0} [built] 
    [81] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built] 
    [82] multi (webpack)-dev-server/client?http://localhost:8000 webpack/hot/dev-server ./src/main.ts 52 bytes {0} [built] 
    + 68 hidden modules 
Child extract-text-webpack-plugin: 
    chunk {0} extract-text-webpack-plugin-output-filename 1.69 kB [entry] [rendered] 
     [0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built] 
     [1] ./~/css-loader!./~/less-loader!./src/assets/less/style.less 188 bytes {0} [built] 
webpack: Compiled successfully. 
webpack: Compiling... 

[at-loader] Checking started in a separate process... 

[at-loader] Ok, 0.042 sec. 
Hash: 5adacfaa8847a8e309ca 
Version: webpack 2.2.1 
Time: 378ms 
           Asset  Size Chunks     Chunk Names 
          bundle.js  709 kB  0 [emitted] [big] app 
0.c988ce477e8a4adc8c3d.hot-update.js 1.11 kB  0 [emitted]   app 
c988ce477e8a4adc8c3d.hot-update.json 43 bytes   [emitted]   
          app.css 204 bytes  0 [emitted]   app 
chunk {0} bundle.js, 0.c988ce477e8a4adc8c3d.hot-update.js, app.css (app) 234 kB [entry] [rendered] 
    [34] ./src/main.ts 286 bytes {0} [built] 
    + 82 hidden modules 
webpack: Compiled successfully. 

Answer 1

あなたが何をすべき：抽出テキストプラグインとして

plugins: [ 
    new ExtractTextPlugin({ filename: '[name].css' }) 
    ], 

を今オブジェクトが必要です。

ここではexampleです。