webpack提取css为单独文件的操作是什么
导读：在这篇文章中我们会学习到关于“webpack提取css为单独文件的操作是什么”的知识，小编觉得挺不错的，现在分享给大家，也给大家做个参考，希望对大家学习或工作能有帮助。下面就请大家跟着小编的思路一起来学习一下吧。...
在这篇文章中我们会学习到关于“webpack提取css为单独文件的操作是什么”的知识，小编觉得挺不错的，现在分享给大家，也给大家做个参考，希望对大家学习或工作能有帮助。下面就请大家跟着小编的思路一起来学习一下吧。
提取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()
],关于“webpack提取css为单独文件的操作是什么”的内容就介绍到这，感谢各位的阅读，相信大家对webpack提取css为单独文件的操作是什么已经有了进一步的了解。大家如果还想学习更多知识，欢迎关注网络，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： webpack提取css为单独文件的操作是什么
本文地址： https://pptw.com/jishu/652852.html