标签: webpack-plugin

我见过这个问题：在 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 …

我正在使用webpack加载器将typescript ts-loader源文件编译成javascript包.现在我想保存个别编译的javascript文件,以及捆绑!我很喜欢编写一个非常简单的webpack插件,但我不确定如何实现它.那就是:我不知道webpack触发哪些事件来监听以及在哪里找到相关数据.有帮助吗？

我正在开发一个Webpack插件,它基本上css在块中寻找资源,当它找到这样的资产时,在它上面应用一些postCSS返回2个输出的插件,应该继续使用它来提取Extract-Text-Plugin,其他输出应该成为一个新的模块内部块,它注入到头部上运行.

我没有设法实现的唯一部分是在现有 Chunk 中创建新模块的部分.有一些指示/想法？

我设法创建了一个新的块,但没有webpack包装器,这意味着我无法支持HMR用于那块css并且懒得加载它.

class ExtractTPAStylePlugin {
  constructor(options) {
    this._options = Object.assign({
      pattern: [
        /"\w+\([^\)]+\)"/
      ]
    }, options);
  }

  extract(compilation, chunks) {
    const promises = [];

    chunks.forEach((chunk) => {
      promises.push(
        chunk.files
          .filter(fileName => fileName.endsWith('.css'))
          .map(file => postcss([extractStyles(this._options)])
            .process(compilation.assets[file].source(), {from: file, to: file})
            .then((result) => {
              compilation.assets[file] = new RawSource(result.css);

              const filename = file.replace('.css', fileSuffix);
              const newChunk = new Chunk(filename);
              newChunk.files = [filename];
              newChunk.ids = …

我正在编写一个 webpack 插件，它在包中包含一个附加文件（使用子编译器）。这工作正常，但现在我想添加手表支持。问题是，包含的文件可能依赖于主编译器实例中的所有文件，因为我正在从那里提取函数。通常，这只会分解为一小部分文件，这些文件实际上使用了插件提供的某些功能。我的想法是通过使用版本标志来实现监视支持，每当我的插件需要再次编译资源时，该标志就会增加......但是，版本仅在编译来自父编译器的所有文件后才会更改。有没有办法在父文件编译后但在发出资产之前强制重建模块（发出事件很好，如果我'

这篇文章的主要目标是在编写Webpack插件时获得有关错误/警告管理的额外信息.

我在Webpack插件文档中看到,可以将err参数传递给基于时序的插件接口(在回调中),但没有进一步解释它如何影响Webpack生命周期,它的构建过程以及如何使用它.它没有解释是否有办法管理其他类型的插件接口的错误.

无论如何,作为第一次尝试,在'emit'生命周期步骤中,我试图传递给err参数a new Error('An error has occurred')或只是一个'An error has occured'值,但在任何一种情况下它确实在控制台中显示给定的err参数(IE很遗憾没有任何参数)特定于错误的颜色),并且webpack-sev-server卡住了:

  function WpAggregationPlugin() {
    this.startTime = Date.now();
    this.prevTimestamps = {};
  }

  WpAggregationPlugin.prototype.apply = function(compiler) {
    compiler.plugin( 'emit', (compilation, callback) => {

      var changedFiles = Object.keys(compilation.fileTimestamps).filter( watchfile => 
        this.prevTimestamps[watchfile] &&
        (this.prevTimestamps[watchfile] < (compilation.fileTimestamps[watchfile] || Infinity)) )

      // compilation.errors.push(new Error('...'))

      this.prevTimestamps = compilation.fileTimestamps;

      if( changedFiles.length <= 0 ) {
        callback()
      } else {
        process.stdout.write( `File modification detected :\n${JSON.stringify(changedFiles, null, 4)}\n` ) …

我正在 Windows 开发系统上测试 webpack 和 node.js。我有这个脚本“webpack.config.js”

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/scripts.js",
  output: {
    path: __dirname + "/js",
    filename: "scripts.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

当我使用生产标签调用 webpack 时，我收到以下错误：

C:\Users\srussell\Desktop\GitHub\nodejsTest\webpack.config.js:14
    new webpack.optimize.OccurenceOrderPlugin(),
    ^

TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor
    at Object.<anonymous> (C:\Users\srussell\Desktop\GitHub\nodejsTest\webpack.config.js:14:5)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at …

我正在编写一个代码分析 webpack 插件，它想在 webpack 包中查找函数名称的所有实例。

我为这个问题做了一个 repo：https : //github.com/RonPenton/webpack-parser-fail-demo

所以解析器真的很简单，就像这样：

    class ParsePlugin {
    apply(compiler) {
        compiler.plugin('compilation', function (compilation, data) {

            data.normalModuleFactory.plugin('parser', function (parser, options) {

                parser.plugin(`call $findme`, function (expr) {
                    console.log("found $findme!");
                });
            });
        });
    }

https://github.com/RonPenton/webpack-parser-fail-demo/blob/master/parse.js

我想要做的就是在代码中找到 $findme() 的所有实例并记录有关它们的信息。稍后，我什至可能最终更改电话，但那是另一天。

当我提供这个源文件时，一切都很好：https : //github.com/RonPenton/webpack-parser-fail-demo/blob/master/good.js

$findme("Testing");
$findme("Testing too...");

当我运行 webpack 时，输出显示找到了两个实例：

found $findme!
found $findme!
Hash: a6555af5036af17d9320
Version: webpack 3.6.0
Time: 69ms
  Asset     Size  Chunks             Chunk Names
good.js  2.52 kB       0  [emitted]  main
   [0] ./good.js 47 bytes {0} [built]

但是当我使用不同的入口点时，函数是在本地（ …

我尝试在 Wordpress 主题上实现 webpack 配置。我想添加 CleanWebpackPlugin 并正确安装它。

我读了一个教程，我在我的 webpack.config.js 上写了这样的东西：

new CleanWebpackPlugin(['./js/build/*','./css/build/*']),

在我制作后，我npm run build收到了这个错误：

clean-webpack-plugin only accepts an options object.

它将我重定向到 GitHub 项目。我阅读了文档，但没有找到如何解决我的问题。

有人可以帮忙吗？

Is there a way to change the default minifier that Laravel Mix uses?

By default, it uses 'Terser' (the Webpack default), but I would like it to instead use Closure Compiler (see here).

I have tried various things but have not had any luck yet. This is my latest failed attempt:

mix.webpackConfig({
    module: {
        rules: [
            // ...
        ]
    },
    plugins: [
        // ...
    ],
    resolve: {
        alias: {
            // ...
        }
    },
    optimization: {
        minimizer: [
            new ClosurePlugin({mode: …

我正在使用带有“clean-webpack-plugin”：“^3.0.0”的最新版本的 webpack 5.3.2。显然插件在我构建时没有清理 dist 文件夹。

这是我的 webpack 信息：

  Binaries:
    Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v12.18.1/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v12.18.1/bin/npm
  Browsers:
    Chrome: 86.0.4240.111
    Firefox: 82.0
  Packages:
    clean-webpack-plugin: ^3.0.0 => 3.0.0 
    copy-webpack-plugin: ^6.2.1 => 6.2.1 
    terser-webpack-plugin: ^5.0.3 => 5.0.3 
    webpack: ^5.3.2 => 5.3.2 
    webpack-cli: ^4.1.0 => 4.1.0 
  Global Packages:
    webpack-cli: 4.1.0
    webpack: 5.3.2

这是我的 webpack 配置：

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: …