webpack - 如何在自定义 webpack 插件中访问源文件中的模块？

Question

一个非常简单的项目：

• 入口文件是index.js
• 一个模块foo.js
• index.js 进口 foo.js
• 一个基本的webpack.config.js
• 一个自定义插件 -HelloWorldPlugin

文件：

// ./src/foo.js
export default {
  foo: 'foo'
}

---

// ./src/index.js
import foo from './foo'
console.log(foo);

---

// webpack.config.js
const path = require('path');
var HelloWorldPlugin = require('./hello-world-plugin');

module.exports = {
  entry: './src/index.js',
  plugins: [
    new HelloWorldPlugin({ options: true })
  ]
};

---

// HelloWorldPlugin.js
class HelloWorldPlugin {
  apply(compiler) {
    compiler.hooks.afterEmit.tapAsync("HelloWorldPlugin", (compilation, next) => {
      console.log(arguments);
      // let foo = the module as imported from ./src/foo.js i.e. {foo: 'foo'}
      next();
    });
  }
}

module.exports = HelloWorldPlugin;

问题是：

是否可以{foo:'foo'}从foo-module内部访问HelloWorldPlugin？

Answer 1

如果你想在你的插件中获取源代码，你可以从 获取它compilation.assets[fileName].source()，你可以这样做：

class HelloWorldPlugin {
  apply(compiler) {
    compiler.hooks.afterEmit.tapAsync("HelloWorldPlugin", (compilation, next) => {
      console.log(arguments);
      compilation.hooks.afterOptimizeAssets.tap({ name: 'name' }, (modules) => {
        for (let fileName in modules) {
          const source = compilation.assets[fileName].source();
          console.log(source); // source of files
        }
      })
      next();
    });
  }
}

通过挂钩其中一个compilation 挂钩，您可以访问所有模块并获取文件名及其内容