WebpackのBabelで無限のファイルを無視する方法

Question

node_modules、特に 'react-widgets'ライブラリから直接少ないファイルを読み込もうとしています。私は、their siteからbasic templateへの指示に従った非常に単純な例を設定しました。これは、ファイルの先頭に@import文句だ

D:\GitHub\react-webpack-template\node_modules\react-widgets\lib\less\react-widgets.less:1 
(function (exports, require, module, __filename, __dirname) { @import "./variables.less"; 
                  ^
SyntaxError: Unexpected token ILLEGAL 
at Object.exports.runInThisContext (vm.js:53:16) 
at Module._compile (module.js:513:28) 
at Object.Module._extensions..js (module.js:550:10) 
at Module.load (module.js:458:32) 
at tryModuleLoad (module.js:417:12) 
at Function.Module._load (module.js:409:3) 
at Module.require (module.js:468:17) 
at require (internal/module.js:20:19) 
at Object.<anonymous> (D:\GitHub\react-webpack-template\webpack.config.js:4:1) 
at Module._compile (module.js:541:32) 

：私の失望に、私は、次のエラーメッセージが表示されます。これは妥当ではありません。私はそれがBabelの干渉であるとはかなり確信していますが、私の.lessファイルを無視する方法は不明です。

これは私が試みたが、まだ私の頭を悩ま私を残してきたSO

require('react-widgets/lib/less/react-widgets.less') 
 

 
module.exports = { 
 
    entry: './index', 
 
    output: { 
 
    filename: 'browser-bundle.js' 
 
    }, 
 
    devtool: 'source-map', 
 
    module: { 
 
    loaders: [ 
 
     { 
 
     test: /\.js$/, 
 
     loader: 'babel-loader', 
 
     query: { 
 
      presets: ['es2015', 'react'] 
 
     } 
 
     }, 
 
     { test: /\.css$/, loader: 'style-loader!css-loader' }, 
 
     { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, 
 
     { test: /\.gif$/, loader: "url-loader?mimetype=image/png" }, 
 
     { test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/, loader: "url-loader?mimetype=application/font-woff" }, 
 
     { test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/, loader: "file-loader?name=[name].[ext]" }, 
 
    ] 
 
    } 
 
};

同様の応答私のWebPACKの設定です。

• attempting to use ExtractTextPlugin
• ignoring .less in the babelrc file

私は他に何を試してみてください？

Answer 1

を問題は、それがあなたのWebPACKの設定であれば、あなたはそれの内部require('react-widgets/lib/less/react-widgets.less')ことができないということですWebPACKのを伝えます〜でそれらを付加。それはどこかのコンポーネントの中に入ります。

Answer 2

これは実際にはバーベルとは関係がなく、ウェブパック自体とは関係ありません。あなたが実行している問題は、.lessファイルをウェブパック設定ファイルにインポート/インポートしようとしていることです。 Webpackがどのように設計されているかではないので、それだけでは機能しません。 webpack.config.jsファイルの中には、アプリケーションコードがどのように構築されるかを設定するためのものはありません。 （この場合は./index.js）

require('react-widgets/lib/less/react-widgets.less') 

webpack.config.jsのうち、あなたのエントリポイントへの

：あなたはすでにless-loaderが設定されているので

は、次の行を移動する必要があります。

（私の元の回答は以下のとおりです）。

---

（オリジナルの答え）

あなたがless-loaderでそれらを処理したい、それらを無視する必要はありません。これは有効なCSSにそれらをコンパイルします、そしてあなたは、ドキュメントにそれらをロードするために、スタイルローダーを使用することができます。

： less-loader github pageから

loaders: [ 
    { test: /\.less$/, loader: 'style!css!less' } 
] 

：

$ npm install --save-dev less less-loader css-loader style-loader 

、その後のWebPACKの設定で

webpackは、ファイルを解決する高度なメカニズムを提供します。 less-loaderは、より少ない 'fileLoaderをスタブし、すべてのクエリをwebpack解決エンジンに渡します。したがって、lessモジュールをnode_moduleからインポートすることができます。ただ、ルックアップするためにmodulesDirectories

@import "~bootstrap/less/bootstrap";