webpack4 处理静态资源

需要处理的静态资源：

• 图片
• 字体
• json 文件
• 视频
• 音频

需要用到的插件：

图片处压缩

图片压缩需要使用第三方插件，这里我使用 image-webpack-loader 来做图片的压缩处理，实现方式并不复杂，只需要在原来的 file-loader 或者 url-loader 下面加一个处理器即可，下面直接上配置代码：

{
	 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
	 use: [
	     {
	         loader: 'url-loader',
	         options: {
	             limit: 10000,
	             esModule: false,
	             name: 'img/[name].[ext]?[hash]'	// 输出到 img 文件夹下
	         },
	     },
	     // 图片压缩
	     {
	         loader: 'image-webpack-loader',// 压缩图片
	         options: {	// 这里可以单独配置每种图片格式的压缩参数
	             mozjpeg: {
	                 progressive: true,
	                 quality: 65
	             },
	             // optipng.enabled: false will disable optipng
	             optipng: {
	                 enabled: false,
	             },
	             pngquant: {
	                 quality: [0.65, 0.90],
	                 speed: 4
	             },
	             gifsicle: {
	                 interlaced: false,
	             },
	
	             // the webp option will enable WEBP
	             webp: {
	                 quality: 75
	             }
	         }
	     }
	 ]
	},

其他资源处理

1. 平常资源处理基本都是使用 url-loader 处理，设置超过一定大小则将之复制到指定路径，未超过则转换为字符数据，这里也上一下基本配置代码：

{
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        name: 'media/[name].[hash:7].[ext]'
    }
},
{
    test: /\.(woff2?|eot|ttf|otf|txt)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        name: 'fonts/[name].[hash:7].[ext]'
    }
},
{
    test: /\.(txt)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        name: 'txt/[name].[hash:7].[ext]'
    }
}

2. 一些不希望打包进项目，希望直接引用的静态资源，则直接将之从 static 目录复制到打包目录，这里使用 copy-webpack-plugin 插件来进行资源拷贝。简单用法：

new CopyWebpackPlugin([
   {
        from: resolve('public'),	// 原始目录
        to: 'dist/static',	// 输出目录
    }
]),

如果说，希望对静态资源进行一定处理（比如说代码压缩，图片压缩）之后再 copy ，则可以配置 transform 属性，加上对应的一些插件，进行相应操作。具体看看官方文档。这里只展示部分代码

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const Uglify = require('uglify-js')
const CleanCSS = require('clean-css')

function resolve (dir) {
    return path.join(__dirname, '..', dir).replace(/\\/g, '/')
}

...

new CopyWebpackPlugin({
	patterns: [
	
		// 压缩 JS
	    {
	        from: resolve('public/**/*.js'),
	        to: resolve('dist'),
	        transform (content, absoluteFrom) {
	            let res = Uglify.minify(content.toString());
	            
	            return res.error ? content : res.code;
	        },
			// 经过转换后的文件，输出路径和直接 copy 略有不同，转换后的路径公式：to + sourcePath
			// 例如, public/js/index.js 转换后的输出路径为 dist/public/js/index.js ，所以需要
			// 在这做一下路径转换，去掉不必要的目录
	        transformPath(targetPath, absolutePath) {
	            return targetPath.replace('public', '');
	        },
	    },
	    
		// 压缩 CSS
	    {
	        from: resolve('public/**/*.css'),
	        to: resolve('dist'),
	        transform (content, absoluteFrom) {
				return new CleanCSS({ level: 1 }).minify(content).styles;
	        },
	        transformPath(targetPath, absolutePath) {
	            return targetPath.replace('public', '');
	        },
	    },

		// 拷贝其他资源
	    {
	        from: resolve('public'),
	        to: resolve('dist'),
	        globOptions: {
	            ignore: ['**/*.js', '**/*.css']
	        }
	    }
	]
}),