标签: webpack-3

我正在使用带有嵌套行的PrimeNG TurboTable.虽然将数据加载到TurboTable会出现严重的性能问题,例如渲染大约需要30秒,并且需要10秒以上才能变得稳定,数据从服务器加载,并且从服务器很快.有没有其他人遇到过问题.如果是的话,你怎么能修复它.

HTML

<p-table [value]="cars">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Brand</th>
            <th>Color</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-columns="columns" let-car>
        <tr>
            <td>{{car.vin}}</td>
            <td>{{car.year}}</td>
            <td>{{car.brand}}</td>
            <td>
          <ul>
            <li *ngFor="let item of sales"
            <a [ngClass]="{'active':car.order==item.order,'inactive':car.order > item.order}">
                                    <i class="fa {{item.icon}}"></i>
                                </a>
            </li>
           </ul>
            </td>
        </tr>
    </ng-template>
</p-table>

TS

  this.cars =[
        {"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
        {"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
        {"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
        {"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
        {"brand": "Mercedes", …

升级到webpack 3并使用ModuleConcatenationPlugin插件(按照https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b中的说明进行操作).我没有看到我的捆绑的差异与插件添加vs没有仍然看到所有功能关闭.

添加了--display-optimization-bailout标志为输出为什么提升被阻止,但我没有看到任何输出.

看了一下webpack源代码,似乎没有设置救助原因因为module.meta.harmonyModule是假的,不知道为什么...... https://github.com/webpack/webpack/blob/master/lib/optimize/ModuleConcatenationPlugin.js #L42

还有其他人有类似的问题吗？

我正在使用 webpack 3.10，并且我为 dev/prod 提供了不同的 webpack 配置。现在在我的 prod 配置中设置了“devtool =“(none)””，而在我的开发配置中它是“eval-source-map”。

遗憾的是使用 prod 配置，我的包不起作用。使用开发配置时一切正常。我尝试了一下，每个在 webpack 文档中标记为“生产：是”的设置：https ://webpack.js.org/configuration/devtool/破坏了我的代码。

任何人都可以解释设置之间的确切区别。还有什么会改变（缩小/丑化什么的）？

亲切的问候。

我目前正在使用 webpack 将 javascript 文件与 React 捆绑在一起。该文件还有另一个导入语句到我的项目中的另一个模块

import { MyModule} from './MyModuleFile.js'

有没有办法从 webpack 包中排除 MyModule.js，并保持导入不变？

Webpack正在输出类似的内容

[78] multi ./src/index.js 28 bytes {0} [built]

这multi条线上的意思是什么？

我刚刚开始使用 webpack 3 和 dllplugin。我设法找到了一些博客文章。这。然而，它们都没有正确的代码示例/ GitHub 示例代码。有谁知道此/工作示例的示例代码的任何参考？

目前，我有3种字体要添加到我的React项目中：a，浅色，粗体。
我的文件结构：

/src
??? /fonts/
?   ??? /A.ttf
?   ??? /A-light.ttf
?   ??? /A-bold.ttf
?  
??? /styles/
?   ??? /base/
?   ?   ??? /__base.scss
?   ??? styles.scss
? 
??? app.jsx
??? webpack.config.js

_base.scss：

@font-face {
  font-family: "A";
  font-style: normal;
  font-weight: 400;
  src: url("../../fonts/A.ttf") format("truetype");
}

@font-face {
  font-family: "A";
  font-style: normal;
  font-weight: 800;
  src: url("../../fonts/A-bold.ttf") format("truetype");
}
@font-face {
  font-family: "A";
  font-style: normal;
  font-weight: 300;
  src: url("../../fonts/A-light.ttf") format("truetype");
}
body {
  font-family: A, Helvetica, Arial, sans-serif;
}

_base.scss由styles.scss导入，styles.scss由app.jsx导入。

我的webpack配置看起来像这样：
webpack.config.js …

我正在寻找一种通过 Webpack@3.12.0 配置传入函数的方法，以帮助 Webpack 在编译时动态解析别名。我有各种第三方包可以导入，例如package-a/file-b. 但是，根据正在导入的第三方包package-a，我希望将其解析为不同版本的package-a; 虽然会有一个版本package-ain node_modules，但旧版本不会在node_modules不同的目录中。由于这些是第三方，我不想手动更改他们的代码。要在相应包中使用的版本在路径名中，并且有任意数量的包。

因为package-a是一个私有包，它不在 npm 上，也不在 Github 上进行版本控制。

这两个帮助我更接近这一点，但两个答案似乎都过时了： - https://github.com/webpack/webpack/issues/110 -是否可以在 webpack 中创建自定义解析器？

这是我到目前为止所拥有的：

config.resolve.plugins = [{
    apply(resolver) {
        resolver.plugin('module', function(request, callback) {
            if (request.request.startsWith('package-a')) {
                this.doResolve(
                    'file',
                    Object.assign({
                        ...request,
                        request: request.request.replace(/^package-a/, `${__dirname}/versions/v2.2.0`) + '.js',
                        file: true,
                        resolved: true,
                    }),
                    null,
                    callback
                );

                return;
            }
            callback();
        });
    }
}];

虽然它正确构建，但问题在于它仍在评估node_modules package-a- 所以我猜代码根本不起作用。

我需要审核 webpack 包中使用的节点包列表。相应的 webpack 配置文件将生产依赖项列表（即来自应用程序的非开发依赖package.json项）作为入口点列表传递到module.exports. 理想情况下，我会得到package.json最终在包中的每个节点包的所有文件的列表。仅搜索node_modules应用程序的目录是不够的，因为这包括 devDependencies 等。

我怎样才能用 webpack 做到这一点？

我有一个使用 webpack（版本 3.6.0）和 vue-loader（版本 13.0.5）构建的 vue.js（版本 2.4.4）应用程序。

在 .vue 文件中，我需要<img>根据我的应用程序的环境修改标签的 src 属性中包含的 url 。

• 在开发环境中，图片必须来自应用程序文件夹，有一个相对路径：“/src/images/exemple.png”
• 生产环境下，图片必须来自cdn，绝对路径：“ https://my-cdn.net/images/exemple.png ”

在“webpack.config.js”文件中，我已经使用“process.env.NODE_ENV”区分了不同的环境，如下所示：

const isDev = process.env.NODE_ENV === 'dev';

但我不知道如何使用 vue-loader（或其他东西）修改 .vue 文件中 img 标签的 src 属性。

有关信息，这里是“webpack.config.js”文件中 vue-loader 的定义：

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      'scss': [
        'vue-style-loader',
        'css-loader',
        'sass-loader'
      ]
    }
  }
}

有没有一种简单的方法可以做到这一点？