Блог

Контекст

На самом деле я управляю некоторыми зависимостями с помощью npm . Затем я написал a webpack.config.js для обработки моего импорта :

1. Связка Jquery popper Bootstrap.js
2. Свяжите codemirror с моими потребностями в модулях (автозаполнение xml и так далее)
3. …
4. Соберите шрифты из fontawesome node_module

Я использую django, поэтому есть collectstatic команда, которая помогает мне собирать все скрипты, шрифты, стили и т.д. в нужную мне папку. Все работает отлично :

• Доступны мои скрипты в комплекте
• А для таблиц стилей я использую относительный импорт в node_module ‘vendor’.

Я могу получить шрифты в 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 amp;amp; (r = t.g.location   "");
        var e = t.g.document;
        if (!r amp;amp; e amp;amp; (e.currentScript amp;amp; (r = e.currentScript.src), !r)) {
            var p = e.getElementsByTagName("script");
            p.length amp;amp; (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
})();
 

К сожалению, это ошибка в 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));
            }
          }
        });
      }
    }
  ]