Warm tip: This article is reproduced from serverfault.com, please click

npm-Webpack

(npm - Webpack)

发布于 2020-12-02 13:04:03

语境

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

  1. 捆绑Jquery + popper + Bootstrap.js
  2. 将Codemirror与我的模块捆绑在一起(xml自动完成等)
  3. ...
  4. 从fontawesome node_module收集字体

我正在使用django,因此有一个collectstatic命令可帮助我将所有脚本,字体,样式等收集到所需的文件夹中。一切都很好:

  • 我的捆绑脚本可用
  • 对于样式表,我使用相对于“供应商” node_module的导入。

我能够将字体获取到node_modules,并按预期将其传递到正确的文件夹中。

问题

我是webpack世界的新手,并且可以肯定的是,我没有按应有的方式使用它,但是它可以正常工作。
然而,当我运行编译我的东西,一个是产生额外的文件 fontawesome.js我的fonts文件夹,是有可能避免这种意外的行为
我想念什么?

只要我不导入此文件就没什么大不了的,但是我不想污染我的仓库。

编辑

我更新了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
})();
Questioner
Devart
Viewed
11
Mike Post 2021-01-09 00:39:32

不幸的是,这是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));
            }
          }
        });
      }
    }
  ]