Question

Webpack 4引入了模块类型，允许更好地处理JSON，CSS，ES6模块等。

某些加载器（如messageformat-loader）接受一种类型的源（在本例中为JSON），但输出不同的类型（在本例中为JS）。这目前在Webpack 4中打破。

ERROR in ./src/messages.json
Module parse failed: Unexpected token v in JSON at position 0
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token v in JSON at position 0
    at JSON.parse (<anonymous>)

加载程序如何通知webpack更改模块类型？

我在我的装载机中尝试this._module.type = 'javascript/auto'，但它没有效果。

作为一种解决方法，最终用户可以将type: 'javascript/auto'添加到加载程序的webpack配置中，但这似乎是实现细节的泄漏。另外，如果用户想要将这个加载器的输出传递给期望JS的另一个加载器，那么它就无法工作。

任何在源类型之间发生变化的加载器都会受到影响，例如val-loader，to-string-loader，apply-loader等。我认为即使babel-loader等也会受到影响它们从ES6模块转换为ES5代码，现在是不同的模块类型。

Answer 1

我在copy-files-loader的源代码中找到了解决此问题的方法。基本上，您在加载程序中需要以下内容：

const LoaderDependency = require('webpack/lib/dependencies/LoaderDependency');

module.exports = function (source) {
   const requiredType = 'javascript/auto';
   const factory = this._compilation.dependencyFactories.get(LoaderDependency);
   this._module.type = requiredType;
   this._module.generator = factory.getGenerator(requiredType);
   this._module.parser = factory.getParser(requiredType);

   // do your transforms on `source` here

   return `export default ${JSON.stringify(source)}`;
}

Webpack 4 - 在加载程序中更改模块的类型

1 个答案: