将 webpack 加载器应用到代码片段答案

【问题标题】：Apply webpack loaders to a code fragment将 webpack 加载器应用到代码片段
【发布时间】：2017-02-25 18:02:57
【问题描述】：

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

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

1) 标准加载器

component.js

import './component.scss';

export class Component {
...

组件.scss

.component {
  background: #663399
}

...

2) 自定义加载器

component.js

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

export class Component {
...

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

感谢任何关于我应该阅读什么来完成这项工作的提示。

【问题讨论】：

标签： webpack webpack-2

【解决方案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 元素中插入 plain CSS 字符串。

现在这些库只能在节点上运行，所以你还需要一个步骤才能让它在浏览器中运行：一个字符串替换插件

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

【讨论】：

谢谢，我今天晚些时候一定会看看！
您使用 string-replace 插件的方式对于我理解完成此操作的另一种方式至关重要。感谢您的洞察力和尝试提供帮助，非常感谢。