Webpack

Question

上下文

我实际上是通过 npm 管理一些依赖项。然后我写了一个 webpack.config.js 来处理我的导入：

捆绑包 Jquery + popper + Bootstrap.js
将 codemirror 与我的模块需求捆绑在一起（xml 自动完成等）
...
从 fontawesome 收集字体 node_module

我正在使用 django，所以有一个 collectstatic 命令可以帮助我将所有脚本、字体、样式等收集到我想要的文件夹中。一切正常：

我的捆绑脚本可用
对于样式表，我使用 'vendor' node_module.

我能够获取 node_module 的字体，并按预期将其传送到正确的文件夹。

问题

我是 webpack 世界的新手，我肯定没有按应有的方式使用它，但它正在工作。
但是，当我运行编译我的东西时，会在我的 fonts 文件夹中生成一个 额外文件 fontawesome.js，是否可以避免这个 意外行为.
我错过了什么？

只要我不导入这个文件就没什么大不了的，但我不想污染我的存储库。

编辑

我更新了我的 webpack 配置代码。
好吧，我发现 js 文件是从我的入口点中的 filename 生成的。但我不想要这个文件:)

wepback.config.js

"webpack": "^5.6.0",

var path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // Extract css in its own file
const webpack = require('webpack');

const path_modules = path.resolve(__dirname, 'node_modules');
const base_path = path.resolve(__dirname, 'src');
const dist_static = path.resolve(__dirname, 'webpacked_src');

module.exports = {
    entry: {
        bootstrap: {
            import: [
                base_path + '/bootstrap/bootstrap-bundle.js',
                //base_path + '/bootstrap/test.scss'
            ],
            filename: 'js_packed/[name].js',
        },
        fontawesome: {
            import: [
                path_modules + '/@fortawesome/fontawesome-free/webfonts/fa-brands-400.eot',
                //path_modules + '/@fortawesome/fontawesome-free/webfonts/fa-brands-400.svg',
                path_modules + '/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf',
                path_modules + '/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff',
                path_modules + '/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2',
                path_modules + '/@fortawesome/fontawesome-free/webfonts/fa-regular-400.eot',
                //path_modules + '/@fortawesome/fontawesome-free/webfonts/fa-regular-400.svg',
                path_modules + '/@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf',
                path_modules + '/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff',
                path_modules + '/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2',
                path_modules + '/@fortawesome/fontawesome-free/webfonts/fa-solid-900.eot',
                //path_modules + '/@fortawesome/fontawesome-free/webfonts/fa-solid-900.svg',
                path_modules + '/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf',
                path_modules + '/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff',
                path_modules + '/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2',
            ],
            filename: 'fonts/[name].js'
        },
        codemirror: {
            import: [
                base_path + '/codemirror/code-mirror.js',
                path_modules + '/codemirror/lib/codemirror.css',
                path_modules + '/codemirror/theme/monokai.css', // Import the theme style --> Little selection midnight / material-darker / material-ocean / monokai (sublimetext)
                path_modules + '/codemirror/addon/hint/show-hint.css',
            ],
            filename: 'js_packed/[name].js',
        },
        vue: {
            import: [
                base_path + '/vue/vue.js',
            ],
            filename: 'js_packed/[name].js',
        },
    },
    output: {
        path: dist_static
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        autoprefixer = require('autoprefixer'),
        new MiniCssExtractPlugin({
            filename: "css_packed/[name].css", // change this RELATIVE to the output.path
        }),
    ],
    module: {
        rules: [
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'fonts/'
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader, // instead of style-loader
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {outputPath: 'css/', name: '[name].min.css'}
                    },
                    'sass-loader'
                ]
            }
        ],
    },
};

fontawesome.js

以及生成文件的内容，如果对webpack高手有帮助的话：

(() => {
    "use strict";
    var t = {};
    t.g = function () {
        if ("object" == typeof globalThis) return globalThis;
        try {
            return this || new Function("return this")()
        } catch (t) {
            if ("object" == typeof window) return window
        }
    }(), (() => {
        var r;
        t.g.importScripts && (r = t.g.location + "");
        var e = t.g.document;
        if (!r && e && (e.currentScript && (r = e.currentScript.src), !r)) {
            var p = e.getElementsByTagName("script");
            p.length && (r = p[p.length - 1].src)
        }
        if (!r) throw new Error("Automatic publicPath is not supported in this browser");
        r = r.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/"), t.p = r + "../"
    })(), t.p, t.p, t.p, t.p, t.p, t.p, t.p, t.p, t.p, t.p, t.p, t.p
})();

Answer 1

不幸的是，这是 webpack 中的一个错误：https://github.com/webpack/webpack/issues/11671

与此同时，可以直接添加一个自定义的 webpack 插件来删除这些文件。这是我用来删除所有 JS 文件的方法（因为我使用 CSS 文件作为我的条目）：

plugins: [
    {
      // Delete empty JS files; work around for https://github.com/webpack/webpack/issues/11671
      apply: (compiler) => {
        compiler.hooks.afterEmit.tap('DeleteJSFilesPlugin', (compilation) => {
          const iter = compilation.emittedAssets.entries();
          for (const [key] of iter) {
            if (key.match(/.*\.js$/)) {
              fs.unlinkSync(path.join(compilation.outputOptions.path, key));
            }
          }
        });
      }
    }
  ]

Webpack - 如何判断不为特定入口点编译 js 文件

Webpack - how to tell not compiling a js file for a specific entry point

npm

fonts

node-modules

webfonts

上下文

问题

编辑

wepback.config.js

fontawesome.js