如何在 Webpack 插件中指定多个加载器?
Posted
技术标签:
【中文标题】如何在 Webpack 插件中指定多个加载器?【英文标题】:How to specify multiple loaders in Webpack plugin? 【发布时间】:2017-06-02 05:30:40 【问题描述】:我的 Webpack 配置包含以下加载器。
module:
loaders: [
test: /\.js$/, loader: "babel", exclude: /node_modules/ ,
test: /\.sass$/, loaders: ["style-loader", "css-loader", "sass-loader"], exclude: /node_modules/
]
,
然后,我希望将 CSS 提取到一个单独的文件中,并尝试使用 extract text webpack plugin,像这样交替我的配置。
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")],...
但是,它失败了。可能是因为我没有正确指定装载机。如何指定多个加载器(一个用于 SASS,一个用于 CSS)?
找不到模块:错误:无法解析 C:\Source\Poc\TestProj 中的模块“[object Object]” @ ./index.js 7:14-38
我已经检查了文件 index.js 但我看不出有什么问题。它实际上是空导出,如下所示。对 7:14-38 的引用对我没有任何意义。文件中没有那么多行,甚至......
import CssGlobal from "./global.sass";
//document.write("Banana!");
export default
【问题讨论】:
【参考方案1】:ExtractTextPlugin.extract()
的这种语法显然只适用于 webpack2 及更高版本(一个对象作为参数)。检查这个issue。
为了使它与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");
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")
]
这将生成一个styles.css
文件。
【讨论】:
谢谢。我现在成功了,谢谢你。只是快速跟进。我被告知大喊语法style!css!sass
是不好的,应该避免。在你的例子中这是一个必要的邪恶(因为它不能以不同的方式完成)?或者你会说你支持它,甚至?
@AndyJ 不客气。您确实可以将数组作为参数传递。我用那个选项更新了我的答案。我搜索了 webpack1 文档并没有找到推荐的方法(docs 使用 css-loader!sass-loader
syntax)。由于某种原因,我不能说这是否是一种不好的方法(除了丑陋的代码),真的不知道。【参考方案2】:
加载器是应用于您应用的资源文件的转换。它们是以资源文件的源为参数并返回新源的函数(在 node.js 中运行)。
例如,您可以使用加载器告诉 webpack 加载 CoffeeScript 或 JSX。
这里解释得很好 http://ui-codeman.blogspot.in/2017/02/webpack.html?view=sidebar
【讨论】:
以上是关于如何在 Webpack 插件中指定多个加载器?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Spring Security SAML 插件在项目中指定 updatePasswordUrl,如 loginFormUrl = '/saml/login'