本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了关于webpack提取css为单独文件的相关问题，包括了css兼容性处理以及压缩css等内容，下面一起来看一下，希望对大家有帮助。
【相关推荐：javascript视频教程、web前端】
提取css成单独文件1.安装插件并引入
npm install mini-css-extract-plugin -dconst 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';
压缩css1.安装插件并引用
npm install optimize-css-assets-webpack-plugin -dconst 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为单独文件（附代码）的详细内容。