extract-text-webpack-pluginを使用すると予期しない文字が表示される

Question

何らかの理由で、extract-text-webpack-pluginでビルドしようとすると何らかの理由でこの設定が失敗します。私は数日の間、抽出 - テキストwebpackプラグインを使って作業しようとしていて、CSSを出力しようとする際に多くの問題を抱えてきました。私は多くのガイドに従い、SO多くの質問を見た後、それを適切に設定したような気がしますが、多分私は..

webpack.config.js

var entry_object = {}; 
entry_object[build_js_dir + "file.js"] = static_js + 'file.js'; 
    entry: entry_object, 
    output: { 
    path: './', 
    filename: '[name]', 
    chunkFileName: "[id].chunk.js" 
    }, 
    module: { 
    loaders: [{ 
     test: /\.js$/, 
     include: path.resolve(__dirname), 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { 
     presets: ['react', 'es2015'] 
     } 
    }, 
    { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract("css-loader!sass-loader") 
    } 
]} 
    plugins: [ 
    new ExtractTextPlugin("[name].css"), 
    ] 
} 

エラーの詳細何か欠けている：

を

~/src/$ webpack --show-error-details 
Hash: ab317ccc65911901bea4 
Version: webpack 1.13.0 
Time: 1032ms 
         Asset  Size Chunks    Chunk Names 
./static/build/js/file.js 51.7 kB  0 [emitted] ./static/build/js/file.js 
    [1] ./static/scss/style.scss 0 bytes [built] [failed] 
+ 1 hidden modules 

ERROR in ./static/scss/style.scss 
Module parse failed: /home/zdelagrange/src/portal/cust-portal/bitsight/static/scss/style.scss Unexpected character '@' (1:0) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected character '@' (1:0) 
at Parser.pp.raise (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:920:13) 
at Parser.pp.getTokenFromCode (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:2813:8) 
at Parser.pp.readToken (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:2508:15) 
at Parser.pp.nextToken (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:2500:71) 
at Parser.parse (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:1615:10) 
at Object.parse (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:882:44) 
at Parser.parse (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/lib/Parser.js:902:15) 
at DependenciesBlock.<anonymous> (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/lib/NormalModule.js:104:16) 
at DependenciesBlock.onModuleBuild (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10) 
at nextLoader (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25) 
at /home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5 
at Storage.finished (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16) 
at /home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/graceful-fs/graceful-fs.js:78:16 
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:405:3) 
@ ./static/js/file.js 3:0-29 

が、私はSCSSローダーのためにこれを使用する場合、それが正常に動作します：

{ 
    test: /\.scss$/, 
    include: /.scss$/, 
    exclude: [ 
    static_scss, 
    static_scss_pdf 
    ], 
    loaders : [ 
    'style-loader', 
    'css-loader?sourceMap', 
    'sass-loader?sourceMap' 
    ] 
}, 

Answer 1

ヨプラグインの前にオブジェクトの最後にカンマがありません。それは次のようになります：

]}, 
    plugins: [ 
    new ExtractTextPlugin("[name].css"), 
    ] 
} 

私はあなたとまったく同じ問題を抱えていたので、私はこれを見つけました。カンマが問題でない場合は、このガイドに従って作業しています。http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html

Answer 2

OPの問題は予期せぬものです@（おそらく@importに添付されています）。それは私がurl-loaderとfile-loaderをインストールし、WebPACKのにローダーとしてそれらを追加する必要がurl(./filename.png)

ERROR in ./~/jquery-ui/themes/base/images/ui-icons_cc0000_256x240.png 
Module parse failed: /myproject/node_modules/jquery-ui/themes/base/images/ui-icons_cc0000_256x240.png Unexpected character '�' (1:0) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected character '�' (1:0) 

ような何か解決しようとすると
同じエラーメッセージが表示されます。

npm install --save url-loader 
npm install --save file-loader 

webpack.config.jsを

module: { 
    loaders: [ 
     { test: /\.css$/, loader: "style-loader!css-loader" }, 
     { test: /\.png$/, loader: "url-loader?limit=100000" } 
    ] 
} 

これらのファイルはうれしいです：

$ webpack 
    ... 
    [69] ./~/css-loader!./~/jquery-ui/themes/base/tooltip.css 528 bytes {4} [built] 
    [70] ./~/css-loader!./~/jquery-ui/themes/base/theme.css 18.7 kB {4} [built] 
    [71] ./~/jquery-ui/themes/base/images/ui-icons_444444_256x240.png 5.05 kB {4} [built] 
    [72] ./~/jquery-ui/themes/base/images/ui-icons_555555_256x240.png 5.05 kB {4} [built]