Question

我的代码正在运行，但最终在输出目录中包含不必要的.js文件。我正在尝试找到一种获得干净输出的方法。为了弄清楚我的意思，我在下面描述我的代码：

您可以找到我的项目here。

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

其中仅包含一些Webpack代码的以下文件就不需要：

js / editor.js
js / editor.js.map
js / main.js
js / main.js.map

我知道它们是由于我声明的输出而生成的，MiniCssExtractPlugin从.js文件中提取了（S）CSS代码。

我无法说：“如果条目是SCSS文件，请在dist/css/[name].css中输出CSS”而不是先在dist/js/[name].js中输出，然后在其中提取CSS将JS文件保存到dist/css/[name].css并将未使用的.js文件保留在dist/js/中？

也许不是Webpack的工作原理。

我当然可以在以后运行另一个插件来清理dist文件夹，但是我很好奇是否有一种方法可以将所有文件放在正确的位置，而又不会留下不需要的文件。

希望一切都足够清楚，否则请询问。感谢您的帮助！

Answer 1

我遇到了同样的问题，并且我发现已经创建了一些解决方法作为插件来避免这种行为。 webpack-fix-style-only-entries

如果我没看错的话，它已经修复了下一版webpack（^ 5）
webpack git issue

如何使用Webpack 4正确编译Sass文件？

1 个答案: