Webpack - выводить разные расширения файлов?

Question

У меня есть такой вид ввода и вывода в файле веб-пакета:

entry: {
  "logic": './foo/logic.js',
  "logic.min": './foo/logic.js',
  "style.min": './foo/style.scss'
},
watch: true,
devtool: 'source-map',
output: {
  path: path.resolve(__dirname, '/dist'),
  filename: '[name].js'
},

Затем я запускаю некоторые правила, чтобы убедиться, что правильные файлы обрабатываются правильно:

module: {
        rules: [
            {
                test: /\.jsx?$/i,
                loader: 'babel-loader',
                options: {
                    presets: ['es2015'],
                    minified: true
                }
            },
            {
                test: /\.scss|css$/,
                use: extractSass.extract({
                    use: [{loader: "css-loader", options: { minimize: true }}, { loader: "sass-loader" }],

                    fallback: "style-loader"
                })
            },
        ],
    },

КакНасколько я понимаю, веб-пакет должен вывести следующий код:

logic.js
logic.min.js
style.min.css

и файлы исходных карт.

К сожалению, есть одна вещь, которую я не могу понять.Я получаю файл с именем:

style.min.css.js

Почему этот файл вообще создается?Я попытался вывести [file]. [Ext], но он вернул буквально [ext] для расширений файлов JS ...

Answer 1

Попробуйте добавить [ext] к ключу имени файла плагина.

Почему вы пытаетесь отобразить минимизированный файл и неинициализированный файл одновременно?

Запустите веб-пакет для неинициализированных файлов.Запустите webpack -p для минимизированных файлов.

Правила

module: {
    rules: [
        {
            test: /\.jsx?$/,
            exclude: [
                path.resolve(__dirname, "node_modules")
            ],                
            loader: "babel-loader",
            options: {
                presets: ['react', 'env', 'stage-0'],
                plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
            }
        },
        {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        },            
        {
            test: /\.(scss|sass)$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [
                    "css-loader",
                    "sass-loader"
                ]
            })
        }
    ]
 }

Плагины

plugins: [
    new ExtractTextPlugin({
        filename: "./css/bundle.[ext]",
        disable: false,
        allChunks: true
    }),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
    })
]

Answer 2

К сожалению, это просто способ работы веб-пакета прямо сейчас. Вы можете взглянуть на эту проблему https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/518. Вы можете написать небольшой плагин, чтобы плагин не генерировал файлы js. Вот простой плагин, который работает:

module.exports = class CleanupAssetsAndFiles {

    constructor (options = {}) {

        this.paths = options.paths || [ 'styles/' ];
        this.extensions = options.extensions || [ 'js', 'js.map' ];

    }

    isInvalidExtension (asset) {

        return (
            this.extensions.reduce((validAssets, e) => {

                if (asset.endsWith(e)) {

                    validAssets.push(e);

                }
                return validAssets;

            }, []).length > 0
        );

    }

    apply (compiler) {

        compiler.plugin('should-emit', (compilation) => {

            compilation.assets = Object.keys(compilation.assets).reduce((assets, a) => {

                if (!this.isInvalidExtension(a) || !this.paths.some((path) => a.startsWith(path))) {

                    assets[a] = compilation.assets[a];

                }

                return assets;

            }, {});

            return true;

        });

    }

};

Я написал этот плагин для веб-пакета 3, но я думаю, что он все еще работает в веб-пакете 4. По сути, он смотрит на расширения и пути, которые вы передаете, и прекращает испускать эти файлы для этих путей. Этот плагин работал для моего варианта использования, но вы можете настроить его на свой, если он не тот. Существует ожидающий PR, чтобы добавить полную поддержку CSS https://github.com/webpack/webpack/pull/6448. Надеюсь, это поможет.