时间戳

首页 > 解决方案 > Webpack - 输出不同的文件扩展名？

javascript - Webpack - 输出不同的文件扩展名？

问题描述

我的 webpack 文件中有这种输入和输出：

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"
                })
            },
        ],
    },

据我了解 webpack 上面的代码应该输出：

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

和源映射文件。

不幸的是，有一件事我无法弄清楚。我得到一个名为：

style.min.css.js

为什么会生成这个文件？我尝试输出 [file].[ext] 但它返回的字面意思是 [ext] 用于 JS 文件扩展名......

标签： javascriptwebpack

解决方案

不幸的是，这只是 webpack 现在的工作方式。你可以看看这个问题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;

        });

    }

};

我为 webpack 3 编写了这个插件，但我相信它在 webpack 4 中仍然有效。基本上，它会查看你传递给它的扩展名和路径，并停止为这些路径发出这些文件。该插件适用于我的用例，但如果不一样，您可以对其进行调整以适用于您的用例。有一个待定的 PR 来添加对 CSS https://github.com/webpack/webpack/pull/6448的全面支持。希望这可以帮助。

推荐阅读