在使用webpack对代码进行打包,会将所有代码进行翻译合并压缩到js文件中,生成的页面的style样式镶嵌在html页面中,那如何将css文件单独抽离出来,并将css文件自动引入到html页面中呢?
书写css代码,必能将其引入到js文件中
import './css/main.css'
webpack.config.js文件配置
// 引入mini-css-extract-plugin插件,用来将css文件单独抽离出来
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { resolve } = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: resolve(__dirname, 'dist'),
filename: 'main.js'
},
module: {
rules: [
// 指定多个配置规则
{
test: /\.css$/i,
use: [
// 'style-loader',
//将css打包到style标签中
// 2. 将css打包到独立文件中
MiniCssExtractPlugin.loader,
//1. css-loader将样式文件输出到js中
'css-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css'
// 输出的css文件名不变的意思
})
]