35 webpack中输出资源处理

输出资源处理

Webpack的构建会输出各种资源，之前我们学习了如何把同一类型的资源进行归类输出，这对于项目的整体结构是很有必要的。

但是还有一些问题需要解决：

1. 之前构建的资源会一直保存在构建文件中，我们需要手动删除这些过期的资源。
2. 项目中还会涉及到一些静态资源的处理，比如在单页面应用的时候，会短暂出现首屏加载白屏问题，为了提升用户体验，会使用图片给出一个loading动画,而这部分的涉及到的资源都是属于静态资源，不需要参与Webpack的构建，每次构建之后，需要手动拷贝该文件内容到输出目录。
3. 大多数时候，我们输出的文件需要进行压缩，然后传到服务器进行相关的部署，这部分操作在此之前需要手动进行压缩。

本章节针对上述问题给出相应的解决方案，配置如下：

const HtmlwebpackPlugin = require('html-webpack-plugin');
const CopywebpackPlugin = require('copy-webpack-plugin');
const { CleanwebpackPlugin } = require('clean-webpack-plugin');
const ZipPlugin = require('zip-webpack-plugin');
module.exports = {
    plugins: [
        new HtmlwebpackPlugin({
            template: './src/index.html'
        }),
        // 拷贝public资源到输出目录下面
        new CopywebpackPlugin(
            {
                patterns: [
                    { from: 'public', to: 'public' },
                ]
            }

        ),
        // 输出新的资源之前，先清楚之前的资源
        new CleanwebpackPlugin(),
        // 输出资源生成zip压缩包
        new ZipPlugin({
            path: 'zip',
            filename: 'build.zip',
        })
    ],
    devServer: {
        open: true
    }
}

该配置使用了对应的插件，很好地解决了上述的问题。通过其中涉及到的插件添加额外的配置，还可以更精细化地精细输出资源的处理。

本章节提供案例源码下载:https://gitee.com/mvc_ydb/webpack/blob/master/handleResource.zip