Question

当我在代码中执行require('./something.html')并配置file-loader以加载类似这样的html文件时：

...
module: {
    rules: [
        {test: /\.html$/, loader: 'file-loader', options: {name: '[name].[hash].html'}
    },
}
...

目前，这会将原始文件复制到配置的输出目录，并用生成的文件URL替换require对这些文件名的调用。哪个效果很好。

我想知道是否有可能进一步处理文件，例如进一步缩小或优化使用任何其他加载器。或者也许处理它们以某种方式使用任何钩子或类似物进行优化。不确定webpack是否提供了这种挂钩。

是否有任何解决方法可以使用file-loader执行此操作？

我试过这样的东西，但它似乎没有用。它没有缩小。

{
    test: /\.html$/, use: [
        {loader: 'raw-loader'},
        {loader: 'html-minify-loader'},
        {loader: 'file-loader'}
    ]
}

如果有人使用webpack 2，请告诉我。感谢。

注意： 我知道有html-webpack-plugin生成index.html这不是我想要的。我正在使用角度js 1.x项目，并且有许多模板html文件，我需要在file-loader中使用templateUrl来动态加载它们已经很好用。现在我只需要缩小那些输出模板文件。

Answer 1

我找不到任何方法或插件来完成这项工作，所以，我创建了一个自定义的webpack插件，它确实在我的情况下完美运行。

如果您遇到类似情况，您可能也想使用此插件webpack-file-preprocessor-plugin

这是一个非常轻量级的webpack插件，允许您在最终发布之前预先处理使用file-loader加载的文件或资产。

由于这是一个非常通用的插件，您可以使用它在资源最终由webpack发布之前对资产进行任何类型的自定义预处理。

此示例演示了如何使用此插件缩小使用file-loader加载的html资源。

const webpack = require('webpack');
const WebpackFilePreprocessorPlugin = require('webpack-file-preprocessor-plugin');
const minifyHtml = require('html-minifier').minify;

module.exports = {
    entry: {
        app: './index.js'
    },
    output: {
        path: './public/dist',
        publicPath: '/dist/',
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                use: {
                    loader: 'file-loader', 
                    options: {
                        name: 'tmpl/[hash].html'
                    }
                }
            }
        ]
    },
    plugins: [
        new WebpackFilePreprocessorPlugin({
            // Prints processed assets if set to true (default: false)
            debug: true,
            // RegExp pattern to filter assets for pre-processing.
            pattern: /\.html$/,
            // Do your processing in this process function.
            process: (source) => minifyHtml(source.toString())
        })
    ]
};

查看此webpack-file-preprocessor-plugin以获取更多信息。

使用webpack文件加载器缩小/优化所需文件

1 个答案: