TL;博士

我想将一堆 *.tpl 文件预编译为可以在 main.js 中需要和使用的 templates.js 文件。我还希望 webpack 处于监视模式以捕获 .tpl 文件中的更改。

更长的描述

插件伪代码是这样的：

将结果写入新文件的最后一部分，触发了一堆监视事件，事情变得很糟糕。我不确定“编译”是链中完成这项工作的正确位置，但我是 webpack 的新手，不知道该链是如何工作的。

整个事情在正常的 webpack 模式下运行良好，但是让它在 --watch 模式下运行会很棒。

我有一个插件：

--> 当我对这​​个文件运行它时：

--> 它被编译并替换为：

--> 但是当我这样做时：

--> 它被编译为：

当你有一个局部变量时，发生了什么以及为什么编译器的行为会有所不同？

以及如何使替换仍然发生？

如果函数调用在对象声明中，我还看到它们被忽略：

我刚开始将 Webpack 与 Angular 1.x 应用程序一起使用，我有一个可行的解决方案，但不是需要我的图像（这会强制将它们复制到构建目录）我希望自动解析 html 并需要所有 IMG标签。

我似乎找到了一个模块，虽然它似乎不再维护：https ://github.com/webpack/html-loader

我想知道我的选择是什么？

选项是使用 Webpack 复制插件将项目复制到构建目录中，但这意味着我可能会复制不使用的东西。

我刚开始使用 Webpack，但到目前为止我所看到的都很棒，尽管它确实需要不同类型的思维来吞咽。

在 typescript 编译器开始对实际上已经在 webpack 的 ProvidePlugin 配置中配置的未解析变量大喊大叫后，有没有办法防止 WebPack 的构建过程失败？

webpack.config.js

tsconfig.json

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

根据我的经验，打字稿不知道哪些变量将被注入到模块中，因此构建没有完成。

这是构建的输出

I am using Angular with Webpack (with loaders like file-loader, url-loader etc.)

Now, I want to load image which is being served through http.

The build was successful, when I used require('./imgs/profile.png')

But when I used tried say E.g. require('http://myserver.com/images/profile.png') the build failed.

Now, the problem is my images are not there in local environment instead they are there on some 3rd party server say e.g. AWS S3.

How to achieve this? Below is my webpack.config.js

我正在尝试将 webpack 设置为具有编译通过，它会扫描一个文件树中的所有 css 文件，然后生成一个 css 文件，其中包含捆绑、自动前缀和最小化的所有样式。

我无法让 autoprefixer 插件工作。

这是相关的 webpack 配置部分：

当我运行 webpack 时，我将所有文件压缩到 bundle.js 中，并正确提取到单独的styles.css文件中。但未应用供应商前缀。

我正在使用这个类来测试前缀：

我试图改变对 ExtractTextPlugin.extract 的调用，就像ExtractTextPlugin.extract('style-loader', ['css-loader', 'postcss-loader'])在其他帖子中看到的那样，但它根本没有帮助。

有任何想法吗？

我正在尝试将 webpack 和离线插件添加到使用 gulp 的现有项目中 - webpack 工作得很好，但添加离线插件很难，

我所做的是添加离线插件 throw npm

webpack.confing.js

main.js 是项目的主文件

现在，当我运行我使用的项目时：

它返回

然后我运行 gulp 服务器：

我检查了 sw.js 返回并显示只有 bundle.js 提供的文件不是我添加到插件主 cahches 对象的任何文件：

所以我使用离线插件的方式是正确的，以及如何添加其他文件以缓存和服务形式 serviceworker ，我应该添加什么配置来做它抛出 webpack confing autmatclicy

我的项目文件树：

I get the general gist that the CommonsChunkPlugin looks at all the entry points, checks to see if there are common packages/dependencies between them and separates them into their own bundle.

So, let's assume I have the following configuration:

If I bundle without using CommonsChunkPlugin

I will end up with 3 new bundle files:

• entry1.bundle.js which contains the complete code from entry1.js and jquery and contains its own runtime
• entry2.bundle.js which contains the complete code from entry2.js and jquery and contains its own runtime
• vendors.bundle.js which contains the complete code from jquery and some_jquery_plugin and contains its own runtime

This is obviously bad because I will potentially load jquery 3 times in the page, so we don't want that.

If I bundle using CommonsChunkPlugin

Depending on what arguments I pass to CommonsChunkPlugin any of the following will happen:

• CASE 1 : If I pass { name : 'commons' } I will end up with the following bundle files:

  • entry1.bundle.js which contains the complete code from entry1.js, a requirement for jquery and does not contain the runtime
  • entry2.bundle.js which contains the complete code from entry2.js, a requirement for jquery and does not contain the runtime
  • vendors.bundle.js which contains the complete code from some_jquery_plugin, a requirement for jquery and does not contain the runtime
  • commons.bundle.js which contains the complete code from jquery and contains the runtime

  This way we end up with some smaller bundles overall and the runtime is contained in the commons bundle. Pretty ok but not ideal.

• CASE 2 : If I pass { name : 'vendors' } I will end up with the following bundle files:

  • entry1.bundle.js which contains the complete code from entry1.js, a requirement for jquery and does not contain the runtime
  • entry2.bundle.js which contains the complete code from entry2.js, a requirement for jquery and does not contain the runtime
  • vendors.bundle.js which contains the complete code from jquery and some_jquery_plugin and contains the runtime.

  This way, again, we end up with some smaller bundles overall but the runtime is now contained in the vendors bundle. It's a little worse than the previous case, since the runtime is now in the vendors bundle.

• CASE 3 : If I pass { names : ['vendors', 'manifest'] } I will end up with the following bundle files:

  • entry1.bundle.js which contains the complete code from entry1.js, a requirement for jquery and does not contain the runtime
  • entry2.bundle.js which contains the complete code from entry2.js, a requirement for jquery and does not contain the runtime
  • vendors.bundle.js which contains the complete code from jquery and some_jquery_plugin and does not contain the runtime
  • manifest.bundle.js which contains requirements for every other bundle and contains the runtime

  This way we end up with some smaller bundles overall and the runtime is contained in the manifest bundle. This is the ideal case.

What I do not understand/I am not sure I understand

• In CASE 2 why did we end up with the vendors bundle containing both the common code (jquery) and whatever remained from the vendors entry (some_jquery_plugin)? From my understanding, what the CommonsChunkPlugin did here was that it gathered the common code (jquery), and since we forced it to output it to the vendors bundle, it kind of "merged" the common code into the vendors bundle (which now only contained the code from some_jquery_plugin). Please confirm or explain.

• In CASE 3 I do not understand what happened when we passed { names : ['vendors', 'manifest'] } to the plugin. Why/how was the vendors bundle kept intact, containing both jquery and some_jquery_plugin, when jquery is clearly a common dependency, and why was the generated manifest.bundle.js file created the way it was created (requiring all other bundles and containing the runtime) ?

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

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

这是整个插件：

这是我webpack.config.js文件中的用法：

我已经包含了 thedone和after-emithandlers，但实际上我一直在注释掉一个。我只需要运行一次事件，但这两个事件都触发得太快了。我可以使用其他活动吗？

E：忘了提，我也在一个 webpack --watch 任务上运行这个。我想保存一个文件，让 webpack 处理它并在我开发时立即将它部署到我的服务器上。如果有更好的开发工作流程，我愿意接受建议。

E2：这是发生的事情的日志：

您可以看到我所做的日志记录发生在11ms emit消息之前，我希望它在那之后......

我是 webpack 的新手，我一直在尝试设置一个工作环境。但是当我试图分离 css 和 js 文件时，我遇到了这个问题。

extract-text-webpack-plugin 没有按预期工作。

我的目录结构如下：

应用 --> css --> (dir1,dir2)

我的 webpack 配置如下

我的外部配置如下

我得到的错误如下

找不到多样式1模块中的错误：错误：无法解析/Users/john-3139/Documents/working/wepack1中的“文件”或“目录”/Users/john-3139/Documents/working/wepack1/app/css/dir1 @多风格1

找不到多样式1模块中的错误：错误：无法解析/Users/john-3139/Documents/working/wepack1中的“文件”或“目录”/Users/john-3139/Documents/working/wepack1/app/css/dir1 @多风格1

我打算将每个目录 css 文件生成为单独的 css 文件，如 style1.css、style2.css

我在这里做错了什么？