Webpack 2 + ExtractTexWebpacktPlugin = 예기치 않은 토큰

Question

Webpack 2과 ExtractTexWebpacktPlugin을 사용하는 데 문제가 있습니다. 내 웹팩 설정 파일 :

이

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" 
}; 

편집 : 나는 단지 1 규칙에 style.less을 단순화했습니다 가 :

이

h1 { 
    color: #0F9E5E; 
} 

오류는 다음과 같이 표시이 시간 : Uncaught SyntaxError: Unexpected token {

모든 것 같습니다 Webpack 문서에 이어지는 간단한 표준 구성입니다. 이 main.ts 내가 app.less을 수입하고있어 파일입니다

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

import * as $ from 'jquery'; 

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

출력으로 내가 Uncaught SyntaxError: Unexpected token . 받고 있어요 - 그것은 변환 된 CSS 파일의 첫 번째 심볼이기 때문에 .을. 따라서 명백히 css을 구문 분석하지 않습니다. 플러그인의

버전 :

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

수정 됨 - 터미널 로그인 :

[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.