标签: webpack-4

我使用webpack 4并且我有两个入口点，用于在 html 中HtmlWebpackPlugin注入包文件<%=htmlWebpackPlugin.files.webpackManifest%>。

网络包配置：

const path = require('path')

// initialize version.js
require('child_process').exec('node ' + path.resolve('./../scripts/setAppVersion.js'), {cwd: '../'}, function (err, stdout, stderr) {
    console.log(err)
})

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    entry: {
        main: './src/main.js',
        loginPage: './src/components/loginPage/loginPage.js',
    },
    plugins: [
        new CleanWebpackPlugin(['dist'], {
            root: path.join(__dirname, '..'),
        }),
        new extractTextPlugin({
            filename: 'bundle.css',
            disable: false,
            allChunks: true,
        }),
        new HtmlWebpackPlugin({
            template: './src/index.ejs',
            hash: true,
            // inject: false,
            chunks: ['main'],
        }),
        // generate Login Page
        new …

我有一个MyLib正在加载的库MyApp。两者都编译的WebPack 4和MyApp用途source-map-loader加载源地图MyLib。从 webpack 4 开始，源映射指向一个缩小的文件而不是原始源代码。

调试到MyLib现在只是跳到以下源代码而不是实际代码：

(function webpackUniversalModuleDefinition(root, factory) { ... }

这曾经适用于 webpack 2。发生了什么变化——或者更确切地说，我需要改变什么才能让它再次工作？

MyLib Webpack 配置

{
    output: {
        path: helpers.root('dist'),
        filename: 'my-library.js',
        library: 'my-library',
        libraryTarget: 'umd',
        umdNamedDefine: true,
        globalObject: 'this'
    },
    resolve: {
        extensions: [ '.ts', '.js' ]
    },  
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: { configFileName: helpers.root('tsconfig.json') }
                    },
                ],
            }
        ]
    },
    optimization: { …

是否有可能同时获得动态导入和拆分块（SplitChunksPlugin）的好处？

动态导入

当我使用动态导入时，我会为每个动态导入的库获取一个块。但是，静态导入的任何内容都会添加到同一个（大）包中。伪代码：

// my-module.js
const foolib = await import('foolib');
export default foolib('some-arg');

结果是：

• foolib.bundle.js只包含foolib, 很棒
• my-module.bundle.js包含my-module 和每个静态导入，不是很好

拆分块插件

做我想要的另一半。伪代码：

// my-module.js
import foolib from 'foolib';
export default foolib('some-arg');

结果是：

• my-module.bundle.jsmy-module只包含，很棒
• vendors.bundle.js 包含所有 node_modules 依赖项，很棒

但是，该解决方案缺乏动态加载。

带有自定义块的动态导入

这个想法是这个配置会给我所有的东西。

• foolib.bundle.js只包含foolib因为它是动态导入的
• my-module.bundle.jsmy-module只包含
• vendors.bundle.js 包含所有 node_modules 依赖项

到目前为止，我得到的结果是，当您将optimization密钥（添加 splitChunk）添加到webpack.config.js.

我应该朝哪个方向进一步调查？我的直觉是，也许我可以找到一种方法来更好地调整动态导入生成块的方式，但也许我错了？

我有以下 JS 文件：

// hello-foo.js
console.log('foo')

我想用 webpack 用 'bar' 替换 'foo'。我有以下 WebPack 插件：

class MyPlugin {

  constructor() {}
  apply(compiler) {

    compiler
      .hooks
      .compilation
      .tap('MyPlugin', (compilation, {normalModuleFactory}) => {

        normalModuleFactory
          .hooks
          .parser
          .for('javascript/auto')
          .tap('MyPlugin', (parser) => {

            parser
              .hooks
              .program
              .tap('MyPlugin', (ast, comments) => {

                ast.body[0].expression.arguments[0].value = 'bar'

                // ast.body[0].expression.arguments[0].raw = 'bar' // does not make any difference :(

              })

          })

      })
  }
}

我调试了webpack/lib/Parser.js，它取回了更新的 AST，但在发出包时它被忽略了。

我知道对于上面的简单示例，加载程序可能是更好的选择，但如果可能的话，我对重用 WebPack 的 AST 特别感兴趣。换句话说，我不想先用 Babel 解析模块，然后再用 WebPack/Acorn 重新解析它。

这里已经有一个类似的问题，但我相信它与 …

我的应用程序中的样式具有以下结构：

应用

- css/
   - bootstrap/
      - boostrap.less -> has (@import "another.less")
      - another.less
   - common/
      - common.less
   - entries/
      - bootstrap.js -> has (import style from "../bootstrap/bootstrap.less")
      - common.js -> has (import common from "../common/common.less")

现在我需要从导入到条目 bootstrap.js 和 common.js 的样式中创建单独的 CSS-es。

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
{
    entry: {
        "boostrap": ["./css/entries/boostrap.js"]
    },
    module: {
        rules: [
            {
                test: /\.(less)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "less-loader"
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "./css/[name].css"
        })
    ]
}

包.json

{ …

Webpack 有一个resolve.mainFields配置：https : //webpack.js.org/configuration/resolve/#resolvemainfields

这允许控制应将哪个 package.json 字段用作入口点。

我有一个应用程序可以包含数十个不同的 3rd 方软件包。用例是我想根据包的名称指定要使用的字段。例子：

• 对于包foo使用main字段node_modules/foo/package.json
• 对于包bar使用module字段node_modules/bar/package.json

我依赖的某些包没有以正确的方式捆绑，该module字段指向的代码不遵循这些规则：https : //github.com/dherman/defense-of-dot-js/blob/master /proposal.md如果我将 webpack 配置批量更改为：

resolve: {
  mainFields: ['module']
}

将mainFields必须被设置为main当前获取应用程序工作。这导致它总是拉入每个依赖项的 CommonJS 版本，而错过了 treeshaking。希望做这样的事情：

resolve: {
   foo: {
     mainFields: ['main']
   },
   bar: {
     mainFields: ['module'],
}

包foo被通过其绑定到我的应用main领域，封装bar被通过其捆绑在module现场。我意识到使用bar包进行 treeshaking 的好处，并且我不会使用foo包破坏应用程序（具有不正确的模块语法的模块字段）。

我正在尝试在我的 rails 6 应用程序中导入字体几个小时。这是一个使用 Rails 6、Webpacker 4 和 PostCSS 的全新应用程序。

一切都通过 webpack（css、js、图像）加载（没有错误）。编译正确。图像正确显示（使用 css background:url）。

OTF/EOT/WOFF 字体：正确编译，@font-face 中的字体由 Webpack 加载和加盐。字体在视图中未正确呈现（我改为使用默认浏览器字体）。

我想我尝试了我所知道的一切。我将文件加载器切换为 url-loader 并返回，但没有成功。更改文件夹层次结构，尝试不同的字体文件，绝对网址（resolve-url-loader）。似乎没有任何效果。

任何人都会很友善地指出我正确的方向，或者分享使用 webpacker 在 rails 6 和 PostCSS 上加载的本地字体的工作配置？

预先感谢您的帮助。

这是我的配置：

javascript > 字体

raleway_thin-webfont.woff

javascript > 包 > application.js

require.context('../fonts/', true, /\.(eot|ttf|woff|woff2|otf)$/i);
import "./application.pcss";
import "js";

require("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
require("channels");

javascript > 包 > application.pcss

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/raleway_thin-webfont.eot'), format('eot');
}

@font-face {
  font-family: 'Amaranth';
  src: url('../fonts/Amaranth-Regular.otf'), format('otf');
}
#test-div { font-family: 'Raleway'; }

/postcss.config.js …

我使用 webpack 3 进行了 jasmine 测试。现在我尝试将它与 webpack 4 一起使用，但有一些问题。

首先，我有spyOn功能的问题。

错误:: myFunction 未声明为可写或没有设置器

我找到了一些关于这个问题的解决方法的文章：spy-on-getter-and-setter

我将spyOn更改为spyOnProperty但没有运气。现在我有问题

> 错误:: myFunction 未声明为可配置

我的代码是用 js 编写的，如下所示：

import * as FocusServiceSpy from '../focus/FocusService';

describe('#onLinkClick', function() {
            it('should call myFunction', () => {
                spyOnProperty(FocusServiceSpy, 'myFunction', 'get');
                expect(FocusServiceSpy.myFunction).toHaveBeenCalled();
            });

        }

你知道这可能有什么问题吗？

更新1：

我应该更具描述性。我想创建对FocusService功能的间谍。这个服务只有一个方法叫做myFunction。我唯一想要实现的是确保调用此方法。

现在我把它改成这样，并且有错误：

>TypeError: Object is not a constructor (evaluating 'new FocusService()') (line 180)

describe('#onLinkClick', function() {
        const FocusService = require('../focus/FocusService');

        it('should call myFunction', () …

我已将我的 webpack 从 3.8.1 迁移到 4.41.2。我一直在独立 javascript 文件中面临“这个”上下文的问题。请检查以下代码：

实用程序

export const calculateSum = (a,b) => {
    this.sum = 0;
    this.sum += a + b;
    return this.sum;
};

请注意，上面是描述问题的示例代码。

在使用 webpack 3.8.1 时，我能够使用上面示例中使用的“this”对象，但在迁移到 4.41.2 后，我无法这样做。

我在非常大的代码库中有很多这样的情况，所以到处更改代码是不可行的。在 webpack 配置中找不到这样的选项。

如何在新版本的 webpack 中修复？

我将 webpack 5 和 @ngtools/webpack 一起使用来构建 angular 应用程序。当我运行时webpack --mode development出现以下错误：

Error: NormalModuleFactory.beforeResolve is no longer a waterfall hook, but a bailing hook instead. Do not return the passed object, but modify it instead. Returning false will ignore the request and results in no module created.
    at /home/alecoder/Projects/JS/ap/node_modules/webpack/lib/NormalModuleFactory.js:543:11
    at eval (eval at create (/home/alecoder/Projects/JS/ap/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
(node:17432) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a …