webpack - 使用 webpack 插件更改源代码

标签 webpack

我正在尝试编写一个 webpack 插件来累积与特定模式匹配的 js require/import 调用,在它们被解析之前将它们从源中删除(因为解析将失败),然后将累积的信息传递给单独的包构建过程。如何使用插件修改源代码?此外,插件甚至是正确的方法吗?

最佳答案

input => output您描述的模式有更多 Webpack 加载器的行为。

什么是 Webpack 加载器?

一个 webpack 装载机 最简单的形式是一个函数,它接受 source参数,然后必须返回一个源:

function allySimpleButAwesomeWebpackLoader(source) {
  var yingSources = source + 'SomeString';

  return yingSources; 
}

什么是 Webpack 插件?

插件可以完成加载程序无法完成的所有工作。我喜欢将人们推荐给 ProgressPlugin - 这是 webpack 库的一部分 - 当他们想学习如何为 webpack 插件实现生命周期 Hook 时。

一个 插件 最简单的形式是带有一个原型(prototype)方法的 ES5 OOP 函数 apply .这个应用函数得到一个 compiler用于访问编译器 API 的变量。
function AllyAwesomePlugin(optionsObject) {
  this.pluginOptions = optionsObject;    


}

AllyAwesomePlugin.prototype.apply = function(compiler) {

}

Here是有关如何编写 Webpack 插件的一些很棒的文档以及有关 Webpack 编译器/插件 API 的更多信息。

关于webpack - 使用 webpack 插件更改源代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37740658/

相关文章:

node.js - Electron 和 Webpack ENOENT : no such file or directory, 打开 '/path.txt'

node.js - 正确配置依赖于本地包的NPM包

css - 如何使用 webpack 2 分离 css 文件中的 less 文件?

Webpack postcss loader,它的目的是什么?

javascript - 如何将文件夹中的所有文件作为模块导入并将所有文件导出为对象?

使用UglifyJs时webpack构建xxx.vue错误

javascript - 找不到模块 : date-fns/is_after

javascript - cacheGroups 丢弃我的组并只创建前两个组

javascript - Webpack require 不起作用

javascript - NextJS 中的多个布局或条件 css 导入