Dev-Cli 开发日记之打包时间统计（自制脚手架尝试中）

dev-cli 开发小记

在构建脚手架，会需要进行各个文件的打包时间统计，优化打包速度。

问题：在使用 speed-measure-webpack-plugin 进行打包时间统计 和 mini-css-extract-plugin 压缩css代码遇到了You forget add mini-css-extract-plugin 报错

解决方式

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 引入插件
// 每次打包的时候，打包目录都会遗留上次打包的文件，为了保持打包目录的纯净，我们需要在打包前将打包目录清空
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

console.log('process.env.NODE\_ENV=', process.env.NODE\_ENV) // 打印环境变量
const config = {
mode: 'development', // 模式
entry: './src/index.js', // 打包入口地址
output: {
filename: 'bundle.js', // 输出文件名
path: path.join(\_\_dirname, 'dist') // 输出文件目录
},
devtool: 'source-map',
module: {
rules: \[
{
test: /.css$/, use: [
                    // 'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader']
            },
            {
                test: /\.s[ac]ss$/i,
use: \[
// 将 JS 字符串生成为 style 节点
// 'style-loader',\
MiniCssExtractPlugin.loader,
// 将 CSS 转化成 CommonJS 模块
'css-loader',
// 将 Sass 编译成 CSS
'sass-loader',
],
}, {
test: /.(jpe?g|png|gif)$/i,
                type: 'asset',
                generator: {
                    // 输出文件位置以及文件名
                    // [ext] 自带 "." 这个与 url-loader 配置不同
                    filename: "[name][hash:8][ext]"
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 50 * 1024 //超过50kb不转 base64
                    }
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
type: 'asset',
generator: {
// 输出文件位置以及文件名
filename: "\[name]\[hash:8]\[ext]"
},
parser: {
dataUrlCondition: {
maxSize: 10 \* 1024 // 超过100kb不转 base64
}
}
},
{
test: /.m?js\$/,
exclude: /(node\_modules|bower\_components)/,
use: {
loader: 'babel-loader',
options: {
presets: \['@babel/preset-env']
}
}
}
]  // 从右往左执行
},
plugins: \[ // 配置插件
new HtmlWebpackPlugin({
template: './public/index.html'
}),
new CleanWebpackPlugin(), // 引入插件,
],
devServer: {
static: {
directory: path.join(\_\_dirname, 'public'),
},
compress: true, //是否启动压缩 gzip
port: 8080, // 端口号
open: true  // 是否自动打开浏览器
}
}
const configWithTimeMeasures = new SpeedMeasurePlugin().wrap(config);
configWithTimeMeasures.plugins.push(new MiniCssExtractPlugin({})); //计算打包时间
module.exports = (env, argv) => {
console.log('argv.mode=', argv.mode) // 打印 mode(模式) 值
// 这里可以通过不同的模式修改 config 配置
return configWithTimeMeasures
}

效果

css代码已经压缩