CSS打包到JS文件中可以提高頁面加載速度，減少HTTP請(qǐng)求和網(wǎng)絡(luò)帶寬，同時(shí)也方便管理和維護(hù)。下面介紹一下如何使用Webpack將CSS打包到JS中。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.css',
}),
],
};

上面的代碼中，首先引入了一個(gè)MiniCssExtractPlugin插件，然后在module.rules中定義了一個(gè)處理CSS文件的規(guī)則，使用MiniCssExtractPlugin.loader將CSS打包到JS中，再使用css-loader加載CSS文件。最后在plugins中定義了一個(gè)MiniCssExtractPlugin實(shí)例，生成style.css文件。

使用上述代碼配置Webpack后，在頁面中只需要引入打包后的bundle.js，就可以同時(shí)加載JS和CSS文件。