将 webpack 加载器应用于代码片段

Question

有没有办法让 webpack 将它的加载器应用到文件的一部分？这是我的意思的一个例子...

假设我有一堆为 .scss 文件配置的加载程序。能够以以下两种方式中的任何一种方式编写组件以产生相同的输出，那就太棒了：

1) 标准装载机

component.js

import './component.scss';

export class Component {
...

component.scss

.component {
  background: #663399
}

...

2) 自定义加载程序

component.js

my-magic-import `
  .component {
    background: #663399
  }
`

export class Component {
...

我怎样才能实现类似于第二种情况的东西？我能否以某种方式修改 webpack 识别 requires、imports 和文件扩展名的方式，以便它能够理解我的自定义语法？作为最后的手段，可以为 js 文件编写一个加载程序来为我完成这项工作吗？

感谢您提供有关我应该阅读哪些内容才能完成此操作的任何提示。

Answer 1

您可以尝试将这两个库与 webpack 一起使用，首先转换为 cssobj，然后再转换为纯 CSS。

https://github.com/cssobj/cssobj-converter（支持sass/less）

var converter = require('cssobj-converter')
var obj = converter('p { color: red; }') //obj is a css object

https://github.com/cssobj/cssobj

var cssobj = require('cssobj')
var result = cssobj(obj) // the result is a CSS string

您可以编写一个全局唯一函数 __insertCSS（在您应用的 index.js 中），它会在 head元素.

现在这些库仅运行在node上，所以你还需要一个步骤让它在浏览器中工作：一个字符串替换插件

https://www.npmjs.com/package/string-replace-webpack-plugin

在 webpack 配置中，你应该配置替换插件来搜索像 /__insertCSS\(.*?\)/ 这样的模式，获取字符串参数，如上所示处理它并用结果替换它。

在你的 webpack 配置中：

var StringReplacePlugin = require("string-replace-webpack-plugin");
var converter = require('cssobj-converter')
var cssobj = require('cssobj')

function parseSass(str){
var obj = converter(str) //obj is a css object
return cssobj(obj) // the result is a CSS string
}

...在 module:

    loaders: [
             // configure replacements for file patterns 
             { 
                test: /\.js(x?)$/,
                loader: StringReplacePlugin.replace({
                    replacements: [
                        {
                            pattern: /__insertCSS\(`(.*?)`\)/ig,
                            replacement: function (match, p1, offset, string) {
                               //p1 is the string enclosed by backticks
                                var cssStr =  parseSass(p1); 
                              //need to escape quotes with JSON in resulting string   
                                return '__insertCSS("' + JSON.stringify(cssStr) + '")'
                            }
                        }
                    ]})
                }
          ]

请注意，我还没有测试过，但乍一看似乎可行。

这个字符串替换加载器必须在babel之前，把它放在loaders数组的第一个

文档在这里：https://webpack.github.io/docs/loaders.html#loader-order

将 webpack 加载器应用于代码片段

Apply webpack loaders to a code fragment

webpack

webpack-2