说明
提取css样式需用到
mini-css-extract-plugin
插件
第一步:插件安装npm i mini-css-extract-plugin -D
第二步:引用const MiniCssExtractPlugin = require('mini-css-extract-plugin');
第三步:用MiniCssExtractPlugin.loader
替换到原来的style-loader
第四步:放入plugins
中
注:MiniCssExtractPlugin.loader和style-loader
不能同时使用
注:webpack5以上的打包html请用npm i html-webpack-plugin@next -D
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js', //输出路径 在js文件下
path: resolve(__dirname, 'build')
},
module: { //loader
rules: [
{ //处理css样式
test: /\.css$/,
use: [
//创建style标签,将样式放入
// 'style-loader'
// 这个loader取代 'style-loader' 。作用:提取js中的css文件,
MiniCssExtractPlugin.loader,
//将css文件整理到js文件中
'css-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/html/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/build.css' //打包后的路径
})
],
mode: 'development'
}