Webpack2加载和提取较少的文件

Question

我正在尝试设置Webpack2来处理较少的文件，并从其中创建一个单独的CSS。不过，我一直有个错误。我在查找概述过程的Webpack2示例时遇到了麻烦，所以我不确定我缺少了什么。

我的Webpack配置：

module.exports = {
  entry: {
    'public': [
      './src/client/styles/public.js'
    ]
  },
  output: {
   ...
  },
  module: {
      {
       test: /.*\.less$/,
        loader: ExtractTextPlugin.extract({ loader: 'less-loader', fallbackLoader: 'style-loader' })
      }
    ]

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

public.js文件(我还尝试将较少的文件直接传递给具有相同结果的条目)：

require('style.less')

style.less文件

a { color: red; }

错误：

ERROR in ./~/less-loader!./src/client/styles/style.less
Module parse failed: /node_modules/less-loader/index.js!/src/client/styles/style.less Unexpected token (1:2)
You may need an appropriate loader to handle this file type.
| a {
|   color: red;
| }

从消息中可以看出，较少的加载程序正在正确地传递文件，但会中断。我试过一个空白文件，但后来我得到了：

TypeError: text.forEach is not a function

版本：

"extract-text-webpack-plugin": "^2.0.0-beta.4",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"style-loader": "^0.13.1",
"webpack": "^2.1.0-beta.25",
"webpack-dev-server": "^2.1.0-beta.5",
"yargs": "~3.5.4"

有什么问题吗？

Answer 1

好的..。使它与以下方面合作：

 loader: ExtractTextPlugin.extract({ 
     loader:[ 'css', 'less' ], 
     fallbackLoader: 'style-loader' 
 })

编辑--这是Webpack v2的文章--感谢@th弹性阴影，因为她在Webpack 4发行的这里上做了笔记。

Answer 2

您可能还需要使用类似样式或css加载器之类的额外加载。来自文档

var css = require("!raw!less!./file.less");
// => returns compiled css code from file.less, resolves imports
var css = require("!css!less!./file.less");
// => returns compiled css code from file.less, resolves imports and url(...)s

较少的加载器只处理CSS中的处理。然后Webpack需要知道如何合并CSS，然后才能提取出来。