本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了关于webpack提取css为单独文件的相关问题，包括了css兼容性处理以及压缩css等内容，下面一起来看一下，希望对大家有帮助。
【相关推荐：javascript视频教程、web前端】
提取css成单独文件
1.安装插件并引入
npm install mini-css-extract-plugin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin')2.配置插件plugins
立即学习“前端免费学习笔记（深入）”；
plugins: [
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
new MiniCssExtractPlugin({
filename:'css/built.css'//对输出的文件进行重命名,默认为main.css
})
],3.修改loader文件
{
test:/.css$/,
use:[
//取代css-loader,提取js中css成单独文件（注意）
MiniCssExtractPlugin.loader,
//将css文件整合到JS文件中
'css-loader',
]
},css兼容性处理
1.安装插件
npm install postcss-loader postcss-preset-env -D
2.在module中配置postcss-loader并配置postcss-preset-env插件
{
test:/.css$/,
use:[
//取代css-loader,提取js中css成单独文件
MiniCssExtractPlugin.loader,
//将css文件整合到JS文件中
'css-loader',
//css兼容性处理：postcss --> postcss-loader postcss-preset-env
//帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
{
loader:'postcss-loader',
options: {
ident: 'postcss',//默认配置
plugins: () => [
require('postcss-preset-env')()
]
}
}
]
},3.配置package.json中的browserslist
"browserslist":{
"development":[
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production":[
">0.1%",
"not dead",
"not op_mini all"
]
}4.为了使package.json中browserslist中的development环境生效，需要在webpack.config.js中配置环境，因为默认是生产环境，我们开发需要开发环境
const {resolve}=require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
//设置node.js环境变量,默认是生产环境，配置后为开发环境；
process.env.NODE_ENV = 'development';压缩css
1.安装插件并引用
npm install optimize-css-assets-webpack-plugin -D
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')2.在plugins中配置插件
plugins: [
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
new MiniCssExtractPlugin({
filename:'css/built.css'//对输出的文件进行重命名
}),
//压缩css文件
new OptimizeCssAssetsWebpackPlugin()
], 
