PS D:\Webpack\03-webpackcss> npm i -D mini-css-extract-plugin //下载插件
webpack.config.js的配置
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按照common.js贵伐,将样式文件输出的熬js中
'css-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css'
// 输出的css文件名不变的意思
})
]
}
注意不要漏了把css当成模块import进index.js中
import './css/main.css';
//以模块的方式把css引入到index.js的入口文件中,不然找不到css文件,无法打包成独立文件