webpack提取配置文件的loader中的重复内容为一个函数提高复用性

提取loader中的重复内容为一个函数，提高复用性

• 例如在配置文件中的module的rules中的rule有可能会有不少重复的use内容，这部分内容可以单独抽取出来成为一个函数，然后通过调用这个函数来使用use内容

例如以下代码（修改前）

module.exports = {
	module: {
		rules: [
			{
				test: /\.css$/,
				// 这部分use中的内容可单独抽取出来成为一个函数
				use: [ 
                 MiniCssExtractPlugin.loader,
                 "css-loader",
                 {
                     loader: 'postcss-loader',
                     options: {
                         postcssOptions: {
                             plugins: [
                                 'postcss-preset-env'
                             ]
                         }
                     }
                 },
             ]
			}
		]
	}
}

修改后代码

const getLoader = function() {
	return [ 
     MiniCssExtractPlugin.loader,
     "css-loader",
     {
         loader: 'postcss-loader',
         options: {
           postcssOptions: {
             plugins: [
                 'postcss-preset-env'
             ]
           }
         }
       },
 ]
}

module.exports = {
	module: {
		rules: [
			{
				test: /\.css$/,
				use: getLoader()
			}
		]
	}
}

压缩css代码并输出

• 通过使用css-minimizer-webpack-plugin插件来压缩所有的css代码为一行

首先通过命令npm install -D css-minimizer-webpack-plugin来安装css-minimizer-webpack-plugin插件

然后在webpack.prod.js配置文件中添加以下代码

const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')

module.exports = {
	plugins: [
		new CssMinimizerWebpackPlugin()
	]
}

最后运行npm run build命令即可打包输出将所有css代码压缩为一行的css文件