如何讓Webpack中的Babel忽略無文件

Question

我想直接從node_modules加載更少的文件，特別是'react-widgets'庫。我按照從their site到basic template的指示設置了一個非常簡單的例子。令我沮喪的是，我收到以下錯誤消息：

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) 

它抱怨文件開頭的@import。這是有效的減少，所以我很確定這是Babel干擾，但我不確定如何讓它忽略我的.less文件。

這是我的WebPack配置

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

，我已經嘗試，但仍留給我抓我的頭相似，所以響應。

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

還有什麼我應該嘗試一下呢？

Answer 1

的問題是，如果這是你的WebPack的配置，你不能require('react-widgets/lib/less/react-widgets.less')它裏面。這在某個組件內部進行。

Answer 2

這實際上與babel無關，並且與webpack本身無關。您遇到的問題是您要在您的webpack配置文件中要求/導入.less文件。這只是簡單的不起作用，因爲這不是webpack的設計。您的webpack.config.js文件中沒有任何內容將其放到客戶端，它旨在配置應用程序代碼的構建方式。

既然你已經有了less-loader配置，你需要招行：

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

（在這種情況下./index.js）

出webpack.config.js和你的切入點。

（我在下面保留了我原來的答案）。

---

（原來的答覆）

你不想理他們，你想與less-loader對其進行處理。這將其編譯爲有效的CSS，然後你可以使用樣式加載器加載到文檔：

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

，然後在的WebPack配置：

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

從less-loadergithub page：

webpack提供瞭解決文件的高級機制。 less-loader存根少於fileLoader並將所有查詢傳遞給webpack解析引擎。因此，您可以從node_modules導入更少的模塊。只是一個在前面加上〜他們告訴的WebPack來查找了modulesDirectories

@import "~bootstrap/less/bootstrap";