那些遇到过的问题

标签: commonschunkplugin

CommonsChunkPlugin配置中"children"引用了什么

我正试图围绕webpack的CommonsChunkPlugin的配置选项.这些选项包括布尔children属性.你能解释一下当设置为true时会发生什么,而不是设置为false时会发生什么？这个文档说"如果true公共块的所有子项都被选中",但页面从未定义"公共块的孩子".孩子们是否包含公共块？或者也许公共块的模块包括？此外,"选择"孩子的意义是什么？

webpack commonschunkplugin

Bry*_*yan
lucky-day
6
推荐指数
1
解决办法
1524
查看次数

IEpack中的Webpack隐式供应商/清单块 - Promise未定义

精简版

当我在IE11中运行我的应用程序时,我Promise is undefined在manifest.js文件中收到错误说明.

如何在执行清单之前添加babel-polyfill或类似运行？

长版

我正在尝试将CommonsChunkPlugin添加到我的webpack配置中,以便将第三方(npm包)脚本拆分为单独的包.根据Webpack 2文档,我已经设置了" 组合隐式公共供应商块和清单文件 ",这在现代浏览器中运行良好.

我编写了一个函数来确保块以正确的顺序包含在我的索引文件中(见下文).

关于我的两个明确的切入点的一些背景知识:

  • legacy_libs - 放置在全局命名空间中的旧库script-loader.我希望随着时间的推移逐步淘汰这些
  • main - 我的主要app入口点

另外两个(供应商和清单)是隐式的,并使用CommonsChunkPlugin创建.

当我用IE11运行时,我收到一个错误:Promise is undefined.这似乎是因为webpack表明自己正在调用new Promise().

在我的主要切入点我有import 'babel-polyfill';.在我添加供应商和清单分块之前,这使我能够克服IE缺乏Promise的问题.但是现在我首先加载了manifest.js,我无法弄清楚如何以正确的顺序包含它.

我的配置如下:

module.exports = {
  entry: {
    legacy_libs: './app/libs.js',
    main: './app/main.js'
  },
  ...
  plugins: [
    // Extract third party libraries into a separate vendor bundle.
    // Also extract webpack manifest into its own bundle (to prevent vendor hash changing when …
Run Code Online (Sandbox Code Playgroud)

webpack commonschunkplugin babel-polyfill

Mat*_*son
2017 05-24
6
推荐指数
1
解决办法
2253
查看次数

Webpack 4.4.1：splitChunks 的性能问题

我正在开发一个包含大量代码的旧项目。这个项目使用 Webpack 3.8.1，我正在尝试更新到 4.4.1，这真是一个障碍！

\n\n

主要的痛苦是项目使用 CommonsChunkPlugin：

\n\n
new CommonsChunkPlugin({\n    name: \'common\',\n    minChunks: 3,\n    chunks: _.without(_.keys(entry), \'ace-iframe\', \'custom-theme-ace\'),\n}),\n\nnew CommonsChunkPlugin({\n    name: \'vendors\',\n    minChunks(module, count) {\n        return isVendorModule(module) && count >= 2;\n    },\n    chunks: _.without(_.keys(entry), \'ace-iframe\', \'custom-theme-ace\'),\n})\n
Run Code Online (Sandbox Code Playgroud)\n\n

我知道Webpack 4不再提供CommonsChunkPlugin。非常感谢以下文章，它们节省了研究时间：

\n\n\n\n

感谢这些令人惊叹的链接，我用以下几行替换了 CommonsChunkPlugin：

\n\n
optimization: {\n    splitChunks: {\n        cacheGroups: {\n            vendors: {\n                priority: 50,\n                    name: \'vendors\',\n                    chunks: \'async\',\n                    reuseExistingChunk: true,\n                    minChunks: 2,\n                    enforce: true,\n                    test: /node_modules/,\n                },\n\n                common: {\n                    name: \'common\',\n                    priority: 10,\n                    chunks: \'async\',\n                    reuseExistingChunk: …
Run Code Online (Sandbox Code Playgroud)

performance webpack commonschunkplugin webpack-4

Kor*_*sik
2018 04-07
5
推荐指数
0
解决办法
1142
查看次数

如何将一个供应商块文件 (webpack) 用于多个 React 项目

我有不同的反应应用程序的不同 gits。每个应用程序都应该使用相同的供应商块文件和外部包（React、ReactDOM ...）

项目设置：

Project 1 (git)
   /dist/...
   /src/...
   webpack.config.js
Project 2 (git)
   /dist/...
   /src/...
   webpack.config.js
Project N (git)
   ...
Run Code Online (Sandbox Code Playgroud)

每个都webpack.config.js包含此配置但具有不同的库名称：

module.exports = {
  entry: {
      app: './src/App.ts',
      vendor: ['react', 'react-dom', 'react-redux', 'redux', 'redux-thunk']
  },
  output: {
      path: path.resolve(__dirname, "dist"),
      filename: '<Name>.bundle.js',
      library: "<Name>",
      libraryTarget: "umd"
  },
  module: { /* ... */ },
  plugins: [
      new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor',
          filename: 'vendor.bundle.js'
      })
  ]
}
Run Code Online (Sandbox Code Playgroud)

问题：

Webpackvendor.bundle.js专门为当前的库/项目构建了一个，而不是全局使用，是否有一个选项可以让 webpack 创建一个vendor.bundle.js可以包含在单个页面上的选项，其中两个应用程序都可以基于此文件加载：

例子：

<html>
   <head>
      <script src="/vendor.bundle.js"></script>
   </head> …
Run Code Online (Sandbox Code Playgroud)

git bundle reactjs webpack commonschunkplugin

Mar*_*tin
2017 08-11
4
推荐指数
1
解决办法
1907
查看次数

CLI 输出中的“块”是什么意思？

我运行的命令：

$ webpack --config webpack.config.js -p --progress
Run Code Online (Sandbox Code Playgroud)

这是我得到的结果。什么chunks意思？为什么它们有时会改变？如果我理解正确，块越多越好。

但我看不到相同数量的文件。如果我在每个入口点都有 0-1-2 个块，那么块的文件在哪里？我只有入口点

许多 在此处输入图片说明

单身的 在此处输入图片说明

我的 WP 配置：

module.exports = {
    context: path.resolve(__dirname, '..'),
    entry: {
        index: 'index.wp',
        home: 'home.wp',
        vendors: [
            'react',
            'react-dom',
            'querystring',
            'react-router',
        ]
    },
    output: {
        path: path.resolve(__dirname, '_distro_'),
        publicPath: '/',
        filename: '[name].[chunkhash:5].js',
        pathinfo: true,
        chunkFilename: 'chunk-[name].[chunkhash].js'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ["vendors", 'index', 'home'],
            minChunks: 1 // << I play with this value and # of chunks change
        }),
    ],
}
Run Code Online (Sandbox Code Playgroud)

WP GitHub https://github.com/webpack/webpack/issues/6387

frontend webpack commonschunkplugin

Gre*_*een
2018 01-27
3
推荐指数
1
解决办法
555
查看次数

在深度嵌套的节点模块中的应用程序中重复删除库

我有一个应用程序,我可以在其中添加模块作为node_modules.现在,这些模块和应用程序使用库XYZ作为节点模块.此外,这些模块还有其他节点模块,它们有自己的库XYZ作为节点模块.

所以,这大致是我的应用程序结构的样子 在此输入图像描述

我使用gulp和webpack,我正在尝试一些如何重复库XYZ.我想构建一个任务,通过这个嵌套的节点模块树,并构建1个通用版本的库XYZ.我怎样才能做到这一点？

我尝试使用deDupePlugin,这是我添加到我的gulp默认任务的所有内容,但它没有用.有什么我错过了吗？

plugins: [
            new webpack.optimize.DedupePlugin()
           // new CommonsChunkPlugin("commons", "commons.js")
        ],
Run Code Online (Sandbox Code Playgroud)

或者,还有其他方法可以实现吗？任何帮助将非常感激

javascript web webpack dedupeplugin commonschunkplugin

Cut*_*nja
lucky-day
0
推荐指数
1
解决办法
551
查看次数

标签 统计

commonschunkplugin ×6

webpack ×6

babel-polyfill ×1

bundle ×1

dedupeplugin ×1

frontend ×1

git ×1

javascript ×1

performance ×1

reactjs ×1

web ×1

webpack-4 ×1