javascript - 如何从 webpack 加载器访问 DOM

Question

我正在为特定的文件扩展名编写一个 webpack 加载器，我想将自定义导入附加到 DOM

module.exports = function(source) {
    ...
    document.appendChild(myImport)

    return `export default 'hello'`;
}

但 DOM 不可访问

ReferenceError：文档未定义

有没有办法从我的加载器访问 DOM？

我的 webpack 配置是：

const path = require('path')

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.myextension$/,
            use: {
                loader: 'my-loader'
            }
        }]
    }
};

Answer 1

不，来自 loader 的代码将在 node.js 环境中运行，该环境对 dom（浏览器环境）没有任何权力。为了能够操作 dom，您必须通过 loader 输出代码，该代码将插入到该类型的文件中，然后在浏览器上执行时会进行修改。

就像是：

module.exports = function(source) {
    return `export default function(){
        document.appendChild(myImport)
    }`;
}