我想在 Vue Router 中引入延迟加载，这样部分代码只会按需加载。

我正在关注 Vue Router 中延迟加载的官方文档： https ://router.vuejs.org/en/advanced/lazy-loading.html

因此，对于测试，我更改了 Vault 模块在路由器文件中的导入方式：

一切都很好，但是，当我第一次打开应用程序时，应该延迟加载的提取包被预先加载：

当我使用路由器转到该视图时，它再次出现在 Dev Tools Network 选项卡中，但表示它是从磁盘加载的，因此该捆绑包显然是在第一页加载时加载的，这完全违背了延迟加载的想法。

我的 webpack 配置中有以下定义：

调用时指定“选项”值：

构建到 webpack-dev-server 和生产都完成，没有错误，我能够显示应用程序。

除了没有添加正文片段之外，所有参数都可以正常工作。

我究竟做错了什么？

我正在尝试找到一种方法来对我的模块进行 tree-shaking 并将 Babel 与 Webpack 一起使用。

如果我从 webpack 文档 ( https://webpack.js.org/guides/tree-shaking/ ) 中获取示例代码并运行它，未使用的模块/函数/其他导出被标记为未使用的和谐导出，这是预期的结果。在使用 -p 参数（生产）运行 webpack 之后，webpack 使用 UglifyJS 删除死的和未使用的代码（用于 tree-shake）。

现在，如果我将 babel-loader 添加到我的 webpack 配置文件中，我的 ES2015 模块将被转译，但现在不再标记为未使用的导出。

例如：

数学.js

app.js（我的入口文件）

在没有babel-loader 的情况下通过 webpack 运行它，该cube函数将被标记为未使用并在编译生产后删除（-p）。

通过带有babel-loader 的webpack 运行它，该cube函数将不会被标记为未使用，并将保留在已编译的包中。

我错过了什么？

编辑

这是一个可以重现这种情况的演示 repo

https://github.com/Milanzor/babel-and-treeshaking-question

更新

如果我添加一个 .babelrc：

我得到了相同的结果，但是如果我添加modules: false到 preset-env 选项，Babel 不会将模块编译为 ES5，并且 Webpack 会再次将模块标记为未使用。

结论

我需要找到一种方法来告诉 Webpack 我的模块是用 Babel 转译的，或者我需要找到一种方法来告诉 Babel 自己扫描未使用的代码。

我正在尝试使用import我的 html 模板，以便 webpack 能够识别它们并在我构建时包含它们。( webpack -d)

根据这个 GitHub 问题，我应该这样做

然后import template from './myTemplate.html';应该工作。

但它并不完全奏效。

然而，这“有效”

很奇怪。

但是现在这不起作用

但是，如果我将 *.html 模块更改为

我现在可以

它工作，但为什么不import template from './myTemplate.html';工作？我做错了什么，因为 GitHub 问题中的其他人似乎让它像那样工作。

目前，我正在利用 CommonsChunkPlugin 将我的供应商包 (/node_modules/) 与我的主应用程序包分开。这很好用。

我最初希望这意味着如果对我的应用程序代码进行更改，“重新打包”会更快，因为供应商捆绑包是独立的并且不会重新打包（并且很少更改）。

看起来对我的应用程序代码的更改也会创建一个新的供应商捆绑包（当我使用监视模式或开发服务器时）。有没有办法将事物配置为智能并仅检测应用程序包更改而不重新打包供应商包？

我正在为我的项目使用 React，并且我正在从 webpack2 迁移到 webpack3。更新 babel 和我执行npm run build的所有依赖项后导致错误：Module build failed: SyntaxError: Missing class properties transform.

错误示例：

另一个例子：

有人知道问题出在哪里吗？我尝试用谷歌搜索错误，但到目前为止我没有找到任何解决方案......

.babelrc

webpack.config

构建命令：

我在 webpack.common.js 文件中使用 webpack3 加载我的 bundle.js 并输出如下。

当我使用 React 前端点击“/”路线时，这可以正常工作。我的 React 路由器工作正常，并按预期在应用程序中导航，根据需要更改 url。

但是，当我使用不是“/”的 url 重新加载浏览器时，bundle.js 不会自动注入。

作为一种解决方法，我在 index.html 模板中放置了一个脚本标记，引用了 bundle.js。这解决了其他路线上的问题。

但是...这意味着 bundle.js 在 '/' 路径上加载了两次。通过 webpack 和 script 标签注入。

我怎样才能使它即使在重新加载时也能在所有路由上注入 bundle.js，或者如何将脚本标签保留在模板中以防止 webpack 3 自动注入 bundle.js？

该项目正在使用 ReactRouter 4，并且从浏览器到服务器的每次调用都会命中此路由：

有没有办法暂时禁用 webpack 的开发服务器监视？

我几乎每次运行一些修改 Git 操作后都必须重新启动服务器，例如 checkout 或 rebase，因为 webpack 重新编译通常会失败并出现一些随机错误。我知道这些更改对于正在运行的开发服务器来说可能太多了，但我认为根本原因是 Git 在重新编译开始运行后仍在更改一些文件。因此，我想在 Git 完成之前禁用手表。

我尝试将观看选项“poll”和“aggregateTime”增加到 3 秒，结果相同。

webpack@3.6.0, webpack-dev-server@2.7.1

从@angular/cli@1.4.5中弹出 webpack.config.js：

I want to alias the the relative font and image imports in my css and scss modules with absolute paths. The goal is store all of my font and image files in two central folders, without going through every css file and changing the relative imports, which would be difficult especially with minified third party stylesheets like bootstrap. I'm not making much progress and setting the aliases is causing many of my relative imports to not resolve when running webpack.

Is it possible to achieve this folder structure using the alias option?

css-loader in the webpack config object

The project is a large muti-page jQuery app with one webpack entry point per page

对于我一直在工作的仪表板组件，最近遇到了一些问题。我正在使用 react-router 来处理客户端的 url 路由，最近我开始为每个路由异步加载组件。

每当我从路由组件发出 http 请求时，我都会在控制台中收到一条警告消息。警告说 setState 不能是未安装组件的状态。到目前为止，我已经能够推断出安装循环可能导致 setState 无法成功设置组件的状态。除此之外，我不确定是什么导致此问题出现。

以前有没有其他人有这个问题？对此问题的任何建议表示赞赏。

控制台截图：

asyncLoader.js：

路由容器.js：

路由“/transactions/history”的组件示例

交易.js：