标签: webpack-4

本文的WebPack 4:模式和优化似乎表明,当mode设置为development将devtool被设置为eval.

我希望这能触发源代码生成,但在任一模式或模式下运行webpack-4-quickstart都不会生成源映射.developmentproduction

如何使用webpack 4生成源图？

我一直无法使用webpack 4运行我的测试茉莉花测试套件.升级webpack后,几乎每个测试都会出现以下错误:

Error: <spyOn> : getField is not declared writable or has no setter 

这是由于我们用于为简单函数创建spys的常见模式是:

import * as mod from 'my/module';
//...
const funcSpy = spyOn(mod, 'myFunc');

我玩过,module.rules[].type但没有一个选项似乎可以做到这一点.

这个webpack GH问题表明ECMA模块是不可写的,对网络有意义,但实际上没有测试的解决方法吗？

相关包版本:

"jasmine-core": "2.6.4",
"typescript": "2.5.3",
"webpack": "4.1.1",
"webpack-cli": "^2.0.12",
"karma": "^0.13.22",
"karma-jasmine": "^1.1.0",
"karma-webpack": "^2.0.13",

我想使用 package 独立测试我们的 React 组件cypress-react-unit-test。几天后，我无法让它与现有的 React Webpack 配置一起工作。我收到错误消息：TypeError: path argument is required to res.sendFile当我通过 Cypress 的窗口打开文件时。

我正在使用他们示例存储库中的文件进行测试：https : //github.com/cypress-io/cypress-example-recipes/blob/master/examples/unit-testing__react/greeting.jsx

我们确实使用了 TypeScript，但我想先让它工作起来。

我试过覆盖，path因为它默认为undefined，但我遇到了同样的错误。

{
  options: {
    path: "/my/home/dir/"
  }
}

在我的cypress/plugins/index.js文件中，我有：

const wp = require("@cypress/webpack-preprocessor");

const webpackConfig = require("../../node_modules/react-scripts/config/webpack.config")("development");

module.exports = on => {
  const options = {
    webpackOptions: webpackConfig
  };

  on("file:preprocessor", wp(options));
};

我显然遗漏了一些东西，但我对 Webpack 还不够了解。我将不胜感激任何指点！谢谢！

I upgraded babel 6.x ? 7.x but having issues running Webpack.

It is complaining about missing core-js/modules/*.

My babel.config.js is in the root directory. I converted the previously existing .babelrc to js (.babelrc also produced the same errors). I am guessing it is some collision with all the core, corejs2, runtime stuff.

There are two apps in my src, mine and Styleguidist (in ./node_modules). My app transpiles and works with these same package.json/babel.config, but …

我们正在迁移到webpack 4.我们已经有dev/prod配置文件.我们开始收到此警告消息:

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' 
or 'production' to enable defaults for this environment.

我们可以通过在cmdline中传递--mode生成来解决这个问题,如下所示:

npm run webpack --mode development ...

正如webpack文档,博客和互联网上的其他地方所提到的那样.我们如何在配置文件中设置配置？简单地放一个模式:模块下的开发是行不通的.只是有点沮丧为什么文档只是缺失...

我目前正在解决使用别名正常工作的问题.根据我的理解,要使用webpack使别名正常工作,您必须:

版本

  "typescript": "2.8.3",
  "webpack": "4.16.2",
  "webpack-cli": "3.1.0",
  "awesome-typescript-loader": "5.2.0",
  "html-webpack-plugin": "3.2.0",
  "source-map-loader": "^0.2.3",

1. 将tsconfig中的别名定义为路径.我通过构建它验证了我的tsconfig和路径/别名是正确的.如果配置不正确,则构建失败.

这是示例文件

Sample.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Footer from '@common/Footer';

export default class Sample{

    public static page(): void {
        ReactDOM.render(<Footer/>,
            document.getElementById('footer')
        );
    }
}

使用webpack,它被配置为使用awesome-typescript-loader.据我了解,它利用TsConfigPathsPlugin来检查所有别名的tsconfig,然后解决它.所以当它到达webpack时,别名已经解决了.但事实并非如此.在bundle.js中,我希望看不到任何@common或任何别名,并且它会被转换.

我还添加了尝试直接在webpack中解析别名以及解析中的别名/ aliasFields.但仍然没有运气.

webpack.js

 const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const webpack = require('webpack');
    const fs = require('fs');
    const TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlugin;
    const ROOT_DIR = path.resolve(__dirname, ".","..");

    const config = { …

我需要对以下理论进行确认。根据TS文档，可以在tsconfig.json中设置两个选项。

1. --allowSyntheticDefaultImports：允许从模块进行默认导入，而没有默认导出。这不影响代码发出，仅影响类型检查。

2. --esModuleInterop：发出__importStar和__importDefault帮助程序以实现运行时babel生态系统兼容性，并启用--allowSyntheticDefaultImports以实现类型系统兼容性。

当我四处搜寻时，我会看到两者都设置为true（至少就我要针对的行为而言）。但是，据我所知，文档，TS和对JS的转换都没有意义。

我认为，我可能只使用后者，而完全删除了前者。但是，由于谨慎而谦虚，我不能完全确定，并且担心我正在做一些不太明亮的事情，但现在还没有意识到。

我担心这是不适当的事情，稍后会在驴上咬我，造成数小时的哀叹和拔毛，同时还拼命地排除故障。怀疑的基础是两个选项均可用，因此我推断在四种情况下都需要所有组合（对/错等），但我无法想象它们是哪种。

它是完全安全的跳过--allowSyntheticDefaultImports如果--esModuleInterop：真正的compilerOptions？如果是这样，为什么我们有这个选择呢？

额外的问题：这两个选项的四个组合（true / false）什么时候需要？

我有一个函数，它接受一些参数并呈现一个 SVG。我想根据传递给函数的名称动态导入该 svg。它看起来像这样：

import React from 'react';

export default async ({name, size = 16, color = '#000'}) => {
  const Icon = await import(/* webpackMode: "eager" */ `./icons/${name}.svg`);
  return <Icon width={size} height={size} fill={color} />;
};

根据动态导入的webpack 文档和神奇的注释“eager”：

“不生成额外的块。所有模块都包含在当前块中，并且不会发出额外的网络请求。仍然返回一个 Promise，但已经解决了。与静态导入相比，模块在调用导入之前不会执行() 制成。”

这就是我的图标解决的问题：

> Module
default: "static/media/antenna.11b95602.svg"
__esModule: true
Symbol(Symbol.toStringTag): "Module"

试图以我的函数试图给我这个错误的方式呈现它：

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

我不明白如何使用这个导入的 Module …

我在我的打字稿代码中动态调用import语句,基于该webpack将创建如下的块:

你可以看到Webpack自动生成的文件名分别为1,2,3,名称不是友好名称

我已经尝试过通过注释提供块名称的方法,但它正在生成 modulename1.bundle.js , modulename2.bundle.js

bootStrapApps(config) {

    config.apps.forEach(element => {

      registerApplication(
        // Name of our single-spa application
        element.name,
        // Our loading function
        () =>
          import(/* webpackChunkName: "modulename"*/  "../../" +
            config.rootfolder +
            "/" +
            element.name +
            "/" +

            "app.bootstrap.js"),
        // Our activity function
        () => true
      );
    });
    start();
}

有没有办法通过此评论动态指定模块名称？我不知道这是打字稿还是webpack特有的.

我在过去的两天里遇到过这个问题.所以我决定从webpack构建过程中完全禁用uglifyjs-webpack-plugin.我无法在webpack 4上找到任何东西.