使用 webpack 文件加载器对所需文件进行缩小/优化答案

【问题标题】：Minification/Optimization of the files required using webpack file-loader使用 webpack 文件加载器对所需文件进行缩小/优化
【发布时间】：2017-06-12 01:15:51
【问题描述】：

当我在我的代码中执行 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 来动态加载它们，这已经很好用了。现在我只需要缩小那些输出模板文件。

【问题讨论】：

HTML Webpack 插件包含用于 HTML 缩小的选项。你调查过吗？（检查此链接并查看“配置”选项）。 npmjs.com/package/html-webpack-plugin
@TimConsolazio 我已经调查过了。但这不是我要找的，这个插件是为了生成一个index.html 文件来服务包，这很好。但我的是一个有角度的 js 项目，并且有许多模板 html 文件，我需要使用 file-loader 来动态加载它们，这已经很好用了。现在我只需要缩小那些输出模板文件。

标签： javascript webpack webpack-2 webpack-file-loader

【解决方案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 了解更多信息。

【讨论】：