所属分类：web前端开发
前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用
【相关推荐：javascript视频教程、web前端】
1.安装插件并引入
微博登录
QQ登录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',
]
},登录后复制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';登录后复制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()
],登录后复制【相关视频教程推荐：vuejs入门教程、web前端入门】
以上就是示例解析webpack提取css为单独文件（附代码）的详细内容，更多请关注zzsucai.com其它相关文章！
