标签: webpack-plugin

我得到了通用的要点,即CommonsChunkPlugin查看所有入口点,检查它们之间是否存在共同的包/依赖关系,并将它们分成自己的包.

所以,我们假设我有以下配置:

...
enrty : {
    entry1 : 'entry1.js', //which has 'jquery' as a dependency
    entry2 : 'entry2.js', //which has 'jquery as a dependency
    vendors : [
        'jquery',
        'some_jquery_plugin' //which has 'jquery' as a dependency
    ]
},
output: {
    path: PATHS.build,
    filename: '[name].bundle.js'
}
...

如果我不使用捆绑 CommonsChunkPlugin

我最终会得到3个新的捆绑文件:

• entry1.bundle.js它包含来自entry1.js和的完整代码,jquery并包含自己的运行时
• entry2.bundle.js它包含来自entry2.js和的完整代码,jquery并包含自己的运行时
• vendors.bundle.js它包含来自jquery和的完整代码,some_jquery_plugin并包含自己的运行时

这显然很糟糕,因为我可能会jquery在页面中加载3次,所以我们不希望这样.

如果我捆绑使用 CommonsChunkPlugin

根据我传递给CommonsChunkPlugin任何以下任何参数的参数将发生:

• 情况1:如果我通过,{ name …

我在为翻译服务编写Webpack插件时遇到问题.

目标是:

1. 在编译期间获取所有必需模块的名称(和源代码).我需要能够扫描包含的源代码以获取特殊t()功能,但我想只扫描那些将包含在包中的模块(根据构建配置,它可以是所有项目模块的子集).
2. 基于收集的模块,我想动态创建其他模块(带有翻译)并将它们添加到捆绑包中.这些模块需要能够导入自己的依赖项.

另一个要求是Webpack的代码拆分功能应该与动态创建的模块一起使用(我想将它们提取到单独的文件中 - 例如bundle.[lang].js).此外,这可能超出了这个问题的范围,我必须使这些翻译块可选(因此您不必加载所有语言,只需加载一个).

更多详细信息可以在https://github.com/ckeditor/ckeditor5/issues/387中找到.

我一直在尝试多种解决方案,但Webpack 2的文档并不是很有帮助.我可以通过听模组分辨率挂钩(让所有的模块before-resolve),但我不知道什么时候所有的依赖都解决了,我不知道我能不能以后添加更多的模块(以及如何做到这一点-是addEntryOK当我可以使用它？).

我也在考虑连接Webpack插件和Webpack加载器(因为我需要的功能非常类似于Webpack的样式加载器),但是从插件级别我只能添加加载器的路径,而不是加载器本身,所以我可以' t传递配置对象作为参数 - 我错了吗？

PS.我使用Webpack 2.如果您的需求看起来很奇怪,请参阅https://github.com/ckeditor/ckeditor5/issues/387 :).

之前我使用webpack common chunks插件来创建包含第三方库(如angular,react,lodash等)的供应商包,但后来我知道了webpack dll插件.他们似乎做同样的事情但dll插件也允许你减少构建时间.所以我很困惑我需要将这两个插件一起使用.我应该使用常见的块插件来在生成构建中创建供应商包并在开发构建中创建dll插件.或者我应该在生产和开发构建中使用dll插件？你能解释一下吗？

我正在尝试创建一个webpack插件,它将解析某个函数的代码并将其替换为另一个函数,该插件还将新函数公开为全局函数.

class someName {
  constructor(local, domain, translationFile, options) {
  }

  apply(compiler) {

    // exposing ngt function as a global
    compiler.plugin('make', function(compilation, callback) {
      var childCompiler = compilation.createChildCompiler('someNameExpose');
      childCompiler.apply(new webpack.DefinePlugin({
        ngt: function(singular , plural, quantity) {
          return quantity == 1 ? singular : plural;
        }
      }));
      childCompiler.runAsChild(callback);
    });

    // searching for the getValue function
    compiler.parser.plugin(`call getValue`, function someNameHandler(expr) {

      // create a function to replace getValue with
      let results = 'ngt('+ expr.arguments  +')';
      const dep = new ConstDependency(results, expr.range);
      dep.loc = …

我在过去的两天里遇到过这个问题.所以我决定从webpack构建过程中完全禁用uglifyjs-webpack-plugin.我无法在webpack 4上找到任何东西.

最近,我开始学习如何构建webpack插件.我正在尝试构建一个可以更新源代码的插件.

规则很简单:

1. 如果入口点名称有小于2个aS,我要所有的变量命名haha,以hehe在上述的大块所有模块的入口点.
2. 如果入口点名称已超过2个aS,我要所有的变量命名haha到hoho所有模块中说的块入口点.

这是我的代码:

a.js

const haha = 'hello';
// will be "const hehe = 'hello';" in the bundle of "aa" entry point
// will be "const hoho = 'hello';" in the bundle of "aaaa" entry point
console.log(haha);
// will be "console.log(hehe);" in the bundle of "aa" entry point
// will be "console.log(hoho);" in the bundle of "aaaa" entry …

在控制台中的webpack开发服务器的热更新期间,我看到以下消息:

[HMR] Updated modules: 
[HMR]  - 1009 
[HMR]  - 1007

我宁愿在那里看到路径名称,我记得有一个插件,但在谷歌找不到它.

{
  resolve: {
    extensions: [...],
      modules: [...],
      alias: {
      ...
    },
    plugins: [...],
  }
}

我有多个文件夹，在每个文件夹中，我都使用相对路径require。

当我require从文件夹中的文件A到文件夹以外的文件B，我想用一个不同的modules阵列来解决模块，因为一些在这两个文件夹的文件具有相同的名称。

我怎样才能做到这一点？

到目前为止我尝试过的是：

• 由于缺少使用最新Webpack版本的正确文档/示例，我无法创建解决插件。另外，我可能会重新实现已经实现的很多东西，因为我需要自己解决所有问题-这是一个坏主意。

有没有办法防止WebPack的构建过程失败,因为打字稿编译器开始对实际上已在webpack的ProvidePlugin配置上配置的未解析变量大喊大叫？

webpack.config.js

plugins: [
...
new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            "_": "underscore",
            "underscore": "underscore"
            //'process.env.NODE_ENV': '"development"'
        }),

]

tsconfig.json

{
  "compilerOptions": {


    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "declaration": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

https://webpack.github.io/docs/list-of-plugins.html#provideplugin

根据我的经验,打字稿不知道哪些变量将被注入模块,因此构建未完成.

这是构建的输出

ERROR in ./src/file1.component.ts
(77,9): error TS2304: Cannot find name '$'.

ERROR in ./src/file2.component.ts
(78,13): error TS2304: Cannot find name '$'.

ERROR in ./src/file3.ts
(155,15): …

我见过这个问题：在 webpack 构建之后运行命令，我修改了那里提供的示例代码。

为了描述我的场景，我试图通过 webpack 获取资产输出并将它们部署到已安装的网络驱动器。我正在使用ncp复制目录并且实际复制工作正常，似乎当 webpack 调用after-emit事件或done事件时，实际上并没有完成将文件发送或写入文件系统。我的副本最终复制了空文件或部分写入的文件。

这是整个插件：

'use strict';
var ncp = require('ncp').ncp;

function WebPackDeployAfterBuild(options) {
    var defaultOptions = {

    };

    this.options = Object.assign(defaultOptions, options);
}

WebPackDeployAfterBuild.prototype.apply = function(compiler) {
    const options = this.options;

    compiler.plugin("done", (stats) => {
            console.log(Object.keys(stats.compilation.assets));
            console.log("\nExecuting Deploy on done...");
            ncp(options.from, options.to, function(err) {
                if (err) {
                    console.error("Err in ncp");
                }
                console.log(`Finished deploying ${options.from} to ${options.to}`);
            });
    });

    compiler.plugin("after-emit", (compilation, callback) => {
        console.log(Object.keys(compilation.assets));
        console.log("\nExecuting Deploy on …