如何在 Webpack 插件中指定多个加载器? [英] How to specify multiple loaders in Webpack plugin?
问题描述
我的 Webpack 配置包含以下加载器.
模块:{装载机: [{ 测试:/\.js$/, 加载器: "babel", 排除:/node_modules/},{ test:/\.sass$/, loaders: ["style-loader", "css-loader", "sass-loader"], 排除:/node_modules/}]},
然后,我希望将 CSS 提取到一个单独的文件中,并尝试使用 提取文本webpack插件,像这样交替我的配置.
var ExtractTextPlugin = require("extract-text-webpack-plugin");模块: {装载机: [{ 测试:/\.js$/, 加载器: "babel", 排除:/node_modules/},//{ test:/\.sass$/, loaders: ["style-loader", "css-loader", "sass-loader"], exclude:/node_modules/}{测试:/\.sass$/,加载器:ExtractTextPlugin.extract({加载器:[css-loader",sass-loader"],fallbackLoader:样式加载器"}),排除:/node_modules/}]},插件:[new ExtractTextPlugin("global.css")],...
然而,它失败了.可能是因为我没有正确指定装载机.如何指定多个加载器(一个用于 SASS,一个用于 CSS)?
<块引用>未找到模块:错误:无法解析 C:\Source\Poc\TestProj 中的模块[object Object]"
@ ./index.js 7:14-38
我已经检查了 index.js 文件,但我看不出有什么问题.它实际上是空导出,如下所示.对 7:14-38 的引用对我来说毫无意义.文件中没有那么多行,甚至......
从./global.sass"导入CssGlobal;//document.write("香蕉!");导出默认{}
ExtractTextPlugin.extract()
的这种语法显然只适用于 webpack2 及更高版本(一个对象作为参数).检查这个问题.
为了让它与webpack1
一起工作,语法是:
ExtractTextPlugin.extract([notExtractLoader], loader, [options])`
notExtractLoader(可选)当未提取 css 时应使用的加载器(即在 allChunks 时在附加块中:假)
loader 用于将资源转换为 css 导出模块的加载器.
来源:https://github.com/webpack/extract-text-webpack-plugin/blob/webpack-1/README.md
因此,一个有效的配置文件将是:
var ExtractTextPlugin = require("extract-text-webpack-plugin");模块.出口 = {/* ... */模块 : {装载机: [{ 测试:/\.js$/, 加载器: "babel", 排除:/node_modules/},{测试:/\.sass$/,排除:/node_modules/,loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")/* 使用 ExtractTextPlugin.extract(["css","sass"]) 也可以 */}]},插件: [新的 ExtractTextPlugin("styles.css")]}
这将生成一个 styles.css
文件.
My Webpack config contains the following loaders.
module: {
loaders: [
{ test: /\.js$/, loader: "babel", exclude: /node_modules/ },
{ test: /\.sass$/, loaders: ["style-loader", "css-loader", "sass-loader"], exclude: /node_modules/ }
]
},
Then, I wished to pull out the CSS to a separate file and I tried using the extract text webpack plugin, alternating my config like this.
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module: {
loaders: [
{ test: /\.js$/, loader: "babel", exclude: /node_modules/ },
// { test: /\.sass$/, loaders: ["style-loader", "css-loader", "sass-loader"], exclude: /node_modules/ }
{
test: /\.sass$/,
loader: ExtractTextPlugin.extract(
{
loaders: ["css-loader", "sass-loader"],
fallbackLoader: "style-loader"
}
),
exclude: /node_modules/
}
]
},
plugins: [new ExtractTextPlugin("global.css")],...
However, it fails with. Probably due me not specifying the loaders correctly. How can I specify multiple loaders (one for SASS and one for CSS)?
Module not found: Error: Cannot resolve module '[object Object]' in C:\Source\Poc\TestProj
@ ./index.js 7:14-38
I've checked the file index.js but I can't see anything wrong there. It's literally empty export, as shown below. And the reference to 7:14-38 says nothing to me. There aren't that many lines in the file, even...
import CssGlobal from "./global.sass";
//document.write("Banana!");
export default {}
This syntax for ExtractTextPlugin.extract()
only works in webpack2 and above, apparently (an object as argument). Check this issue.
In order to make it work with webpack1
, the syntax is:
ExtractTextPlugin.extract([notExtractLoader], loader, [options])`
notExtractLoader (optional) the loader(s) that should be used when the css is not extracted (i.e. in an additional chunk when allChunks: false)
loader the loader(s) that should be used for converting the resource to a css exporting module.
Source: https://github.com/webpack/extract-text-webpack-plugin/blob/webpack-1/README.md
So, a working config file would be:
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
/* ... */
module : {
loaders: [
{ test: /\.js$/, loader: "babel", exclude: /node_modules/ },
{
test: /\.sass$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
/* using ExtractTextPlugin.extract(["css","sass"]) works too */
}
]
},
plugins: [
new ExtractTextPlugin("styles.css")
]
}
This will genereate a styles.css
file.
这篇关于如何在 Webpack 插件中指定多个加载器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!