Как использовать Webpack 4 для правильной компиляции файлов Sass? - PullRequest
0 голосов
/ 16 января 2019

Мой код работает, но он заканчивается ненужными файлами .js в выходном каталоге. Я пытаюсь найти способ получить чистый вывод. Чтобы понять, что я имею в виду, я опишу свой код ниже:

Вы можете найти мой проект здесь .

Конфигурация Webpack следующая (tasks/options/webpack.js, я использую grunt для запуска webpack, если это важно):

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    build: {
        ...
        entry: {
            app: `${path.resolve()}/src/assets/js/app.js`,
            main: `${path.resolve()}/src/assets/sass/main.scss`,
            editor: `${path.resolve()}/src/assets/sass/editor.scss`,
        },
        output: {
            path: `${path.resolve()}/dist/assets/js`,
            filename: '[name].js',
        },
        ...
        devtool: 'nosources-source-map',
        plugins: [
            ...
            new webpack.LoaderOptionsPlugin({
                options: {
                    postcss: [autoprefixer()],
                },
            }),
            new MiniCssExtractPlugin({
                // Options similar to the same options in webpackOptions.output
                // both options are optional
                filename: '../css/[name].css',
            }),
            ...
        ],
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /(node_modules|vendor)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/env', '@babel/preset-react'],
                            plugins: [
                                'transform-class-properties',
                                '@babel/plugin-proposal-object-rest-spread',
                            ],
                        },
                    },
                },
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                        },
                        {
                            loader: 'css-loader?-url&sourceMap',
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                parser: 'postcss-scss',
                                sourceMap: true,
                            },
                        },
                        {
                            loader: 'sass-loader',
                            query: {
                                outputStyle: 'extended',
                                sourceMap: true,
                                sourceMapContents: false,
                            },
                        },
                    ],
                },
            ],
        },
    },
};

Если я запускаю это, я получаю следующий вывод в dist/assets/...:

  • JS / app.js
  • JS / app.js.map
  • JS / editor.js
  • JS / editor.js.map
  • JS / main.js
  • JS / main.js.map
  • CSS / editor.css
  • CSS / editor.css.map
  • CSS / main.css
  • CSS / main.css.map

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

  • JS / editor.js
  • JS / editor.js.map
  • JS / main.js
  • JS / main.js.map

Я получаю, что они генерируются из-за вывода, который я объявил, и MiniCssExtractPlugin извлекает (S) код CSS из файлов .js.

Нет ли способа, чтобы я мог сказать: "Если запись является файлом SCSS, выведите CSS в dist/css/[name].css" вместо того, чтобы сначала вывести его в dist/js/[name].js, затем извлеките CSS из этого файла JS в dist/css/[name].css и оставляя неиспользованные файлы .js в dist/js/?

Может быть, это не так, как работает Webpack.

Я, конечно, могу запустить другой плагин, чтобы потом очистить папку dist, но мне любопытно, есть ли способ поместить все файлы в нужное место, не оставляя файлы, которые мне там не нужны.

Надеюсь, все достаточно ясно, если нет, пожалуйста, спросите. Спасибо за вашу помощь!

1 Ответ

0 голосов
/ 18 июня 2019

У меня была такая же проблема, и я обнаружил, что некоторые обходные пути были созданы как плагин, чтобы избежать такого поведения. WebPack-фикс стиль-только-запись

И если я правильно прочитал, это было исправлено для следующей версии веб-пакета (^ 5)
выпуск веб-пакета git

...