1、将css生成到独立文件
安装: npm install mini-css-extract-plugin --save-dev
引入:
//引入mini-css-extract-plugin插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
配置:
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
plugins: [
//将css提取到一个独立的文件
new MiniCssExtractPlugin({
filename:'css/style.css'
})
],
2、postcss
css部分样式/新样式,在不同浏览器兼容性不同,所以需要解决浏览器的兼容性问题
安装: postcss/postcss-loader/autoprefixer
配置:
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader",'postcss-loader'],
}
和 webpack.config.js 同一级添加文件 postcss.config.js:
module.exports = {
plugins:[
require('autoprefixer') //使用autoprefixer添加前缀
]
}
在package.json文件中添加浏览器配置:
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead"
]
}