标签: webpack-loader

在以前的Angular版本中,有一个弹出选项,以便您可以根据需要修改webpack配置.
此功能最常见的用例之一是添加自定义webpack加载器.

在Angular 6中,此选项已暂时禁用,因此目前无法获取webpack配置(除了在角度源代码中查找).似乎他们将在6.1(或许不是)中启用此功能,但在此之前它不可用.

有没有办法将自定义webpack配置添加到使用@ angular/cli 6的Angular 6应用程序？或者,有没有办法"弹出"新的Angular CLI在引擎盖下使用的webpack配置？

似乎Webpack运行的工具通过"加载器"转换代码,而不是直接使用这些工具的API.这为这些工具添加了一个抽象层,这有时意味着工具的API没有完全公开,或者工具的更新需要时间在加载器中更新.这是对问题的更详细描述.

我用Grunt/gulp遇到了这个问题,最后放弃那些转而直接用我通过npm运行的bash脚本转换我的源代码.是否有可能与Webpack做同样的事情？如果是这样,怎么样？

我在学习 webpack 时遇到了loaders， 的定义loaders说它转换你的代码，以便它可以包含在 javascript 中bundle。

但是，html-loader 是如何工作的？

该html-loader认定中说，它导出HTML作为字符串（什么意思）。

它还说每个可加载的属性（例如<img src="image.png"导入为require('./image.png')，并且您可能需要在配置（file-loader或url-loader）中为图像指定加载器，这是什么意思。

我想知道，实际上 html-loader 做了什么。它是转换html为 String 还是只是将img标签转换为require. 所有这些如何协同工作。

谁能详细解释一下。

我有一堆 webpack 入口点配置如下：

module.exports = {\n  entry: {\n    pageOne: \'./src/pageOne.js\xe2\x80\x99,\n    pageTwo: \'./src/pageTwo.js\xe2\x80\x99,\n    pageThree: \'./src/pageThree.js\xe2\x80\x99\n  }\n}\n

这些条目本身导入各种模块。\n例如 pageOne.js导入module1.js

我还使用骨架加载器来处理原始 javascript 内容（pageOne.js 、 pageTwo.js、 \xe2\x80\xa6 ）

此加载器回调函数\xc2\xb4s \xe2\x80\x9cthis\xe2\x80\x9d 指的是\xe2\x80\x9cloader 上下文\xe2\x80\x9d

我的问题：\n现在我在回调中拥有文件内容（例如module1.js ）及其相应的加载器上下文（通过此）。但我需要知道module1.js的（原始/父）条目名称。因此，对于module1.js，它应该告诉我它是原始pageOne条目名称的一部分。那可能吗？

在我的reactJS应用程序中 - 我将所有.scss文件包含在一个main.scss文件中 - 在src文件夹中的styles文件夹下.我有以下webpack配置.尝试将main.scss文件直接包含在我的主要组件中 - 在'@import'中获取错误,我导入其他scss文件.如果我包含单独的scss文件样式是好的 - 但如何使用一个main.scss文件以及如何包含它？

错误:预期的意外令牌((1:8)

1 | @import'mycomponent';

module.exports = {
  entry: [
    'webpack-hot-middleware/client',
    path.resolve(__dirname, 'src'),
  ],
  output: {
    path: path.resolve(__dirname, 'src'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  plugins: [
    new ExtractTextPlugin('bundle.css', { allChunks: true }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
        WEBPACK: true,
      },
    }),
  ],
  module: {

    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          query: { …

我正在研究基于反应的 nextjs 应用程序。一些 npm 包使用外部 css 导入。我收到类似的错误

Module parse failed, you may need an appropriate loader to handle this file type.

如何在我的 nextjs 应用程序中支持从外部包导入 css。我通过在 next.config.js 中进行更改来检查某个地方，它有效。但我找不到合适的。如果有人能帮助我解决这个问题，那就太好了。

我写了这个 webpack 加载器

module.exports = function(source) {
    return `export default 'hello'`;
}

我想使用 es6 导入重写

export default function loader(source) {
    return `export default 'hello'`;
}

没有成功

语法错误：意外的令牌导出

我的 webpack 配置是：

const path = require('path')

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },,
    resolveLoader: {
        modules: [
            'node_modules',
            path.resolve(__dirname, 'loaders')
        ]
    },
    module: {
        rules: [{
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }, {
            test: /\.txt$/, …

我正在使用 vue 单文件组件，并将标记和逻辑分别分离到.pug文件中.ts。如果您对我不统一的原因感兴趣，请参阅评论部分。

问题

import template from "@UI_Framework/Components/Controls/InputFields/InputField.vue.pug";
import { Component, Vue } from "vue-property-decorator";

console.log(template);

@Component({
  template,
  components: {
    CompoundControlBase
  }
})
export default class InputField extends Vue {
    // ...
}

在开发构建模式下导出的模板是正确的（为了可读性我对其进行了美化）：

import template from "@UI_Framework/Components/Controls/InputFields/InputField.vue.pug";
import { Component, Vue } from "vue-property-decorator";

console.log(template);

@Component({
  template,
  components: {
    CompoundControlBase
  }
})
export default class InputField extends Vue {
    // ...
}

在生产模式下，我的标记已小写。所以，console.log(template)输出：

<CompoundControlBase 
  :required="required" 
  :displayInputIsRequiredBadge="displayInputIsRequiredBadge"
    <TextareaAutosize 
      v-if="multiline" 
      :value="value" 
    /><TextareaAutosize>
</CompoundControlBase> …

我正在构建一个自定义 Webpack 加载器。加载器做什么并不重要，但它以某种方式转换 JSON 并使用 JSON 中的路径来解析某些其他细节。在我的例子中，loader.js我需要一种获取正在加载的 JSON 文件的原始路径的方法，以便我可以正确解析其他路径。

采用这个简单的加载器和配置：

加载器.js

module.exports = function (source) {
  
  /* Do some file lookups based on source and modify source */
  this.callback(null, source)

}

webpack.config.js

module.exports = {
  /* ... */
  module: {
    rules: [
      {
        test: /\.json$/i,
        use: ['loader'],
      },
    ],
  },
};

加载程序正在工作（正在使用），但我添加的任何业务逻辑都需要具有路径感知能力，以便它可以在文件系统上进行查找。

因为这是一个 JSON 加载器，所以source加载器函数中的 var 作为原始 JSON 内容传递，没有有关 JSON 是从哪个文件加载的详细信息。如何从加载器中获取路径信息，以便我可以根据其中的内容执行其他文件查找source？

我正在开发一个 Electron 项目，并且我已经为其配置了 webpack。我最近使用 npm 安装了 s3-sync-client 和 @aws-sdk/client-s3，但是当我尝试运行该项目时，我在控制台中收到以下错误：

[0] Module parse failed: Unexpected token (8:41)
[0] You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
[0] |         this.maxAttemptsProvider = maxAttemptsProvider;
[0] |         this.mode = RETRY_MODES.ADAPTIVE;
[0] >         const { rateLimiter } = options ?? {};
[0] |         this.rateLimiter = rateLimiter ?? new DefaultRateLimiter();
[0] |         this.standardRetryStrategy = new StandardRetryStrategy(maxAttemptsProvider);
[0]  @ ./node_modules/@aws-sdk/util-retry/dist-es/index.js 1:0-40 1:0-40
[0]  @ …