如何从 webpack 加载器访问 DOM

Question

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

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

    return `export default 'hello'`;
}

但是 DOM 无法访问

ReferenceError: document is not defined

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

我的 webpack 配置是：

const path = require('path')

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

Answer 1

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

类似于：

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

如何从 webpack 加载器访问 DOM

How to access DOM from webpack loader

javascript

webpack

webpack-loader

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