Javascript 网页包-输出不同的文件扩展名？

我的web包文件中有此类输入和输出：

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]，但它返回了JS文件扩展名的[ext]。

不幸的是，这只是webpack目前的工作方式。你可以看看这个问题。您可以编写一个小插件来阻止插件发出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;

        });

    }

};

---

我为Webpack3编写了这个插件，但我相信它在Webpack4中仍然有效。基本上，它会查看您传递给它的扩展名和路径，并停止为这些路径发送这些文件。这个插件适用于我的用例，但是如果它不一样，你可以调整它来适用于你的。有一个待定的PR来添加对CSS的完全支持。希望这有帮助。

尝试将[ext]添加到插件文件名键

为什么要同时渲染缩小的文件和未缩小的文件

为未整理的文件运行webpack。为缩小的文件运行webpack-p

规则

插件

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

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