Minification/Optimization 个使用 webpack 文件加载器所需的文件

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 这不是我要找的。我在 angular js 1.x 项目中工作，有许多模板 html 文件，我需要在 templateUrl 中使用 file-loader 来加载它们已经很好用的苍蝇。现在我只需要缩小那些输出模板文件。

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 了解更多信息。

Minification/Optimization 个使用 webpack 文件加载器所需的文件

Minification/Optimization of the files required using webpack file-loader

javascript

webpack

webpack-2

webpack-file-loader