CSS打包生成行內樣式是前端開發中的一種優化方式，在頁面優化的過程中，可以通過將多個css文件打包成一個文件，并將其嵌入到HTML頁面中以減少HTTP請求次數，從而提升頁面加載速度。

使用CSS打包生成行內樣式的方式需要使用一些工具，比如Webpack、gulp等任務管理器。在這些工具中，我們可以使用插件將多個CSS文件打包成一個文件，同時生成一個包含這些行內樣式的HTML模板，以提高性能。

下面是一個使用Webpack打包生成行內樣式的示例：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: __dirname + '/dist'
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
inject: 'body'
}),
new MiniCssExtractPlugin()
]
};

在這個示例中，我們使用webpack打包CSS文件，其中使用了MiniCssExtractPlugin插件將CSS文件打包成一個單獨的文件，并將其嵌入到HTML頁面中成為行內樣式。同時使用HtmlWebpackPlugin插件將這個HTML模板生成到/dist文件夾下。

需要注意的是，在使用CSS打包生成行內樣式時，一定要遵循一定的規則，比如盡量減少行內樣式的數量和大小，避免樣式閃爍等問題，以確保頁面的性能和用戶體驗。