Heim > Artikel > Web-Frontend > Beispiel für das Parsen eines Webpacks zum Extrahieren von CSS in separate Dateien (Code im Anhang)
Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript. Er stellt hauptsächlich die Probleme im Zusammenhang mit der CSS-Kompatibilitätsverarbeitung und der CSS-Komprimierung vor. 🔜 in Plugins
npm install mini-css-extract-plugin -D const MiniCssExtractPlugin = require('mini-css-extract-plugin')
3. Ändern Sie die Loader-Datei
plugins: [ new HtmlWebpackPlugin({ template:'./src/index.html' }), new MiniCssExtractPlugin({ filename:'css/built.css'//对输出的文件进行重命名,默认为main.css }) ],CSS-Kompatibilitätsverarbeitung
1. Installieren Sie das Plug-in
{ test:/.css$/, use:[ //取代css-loader,提取js中css成单独文件(注意) MiniCssExtractPlugin.loader, //将css文件整合到JS文件中 'css-loader', ] },2. Konfigurieren Sie den Postcss-Loader im Modul und konfigurieren Sie das Postcss-Preset-Env-Plugin
npm install postcss-loader postcss-preset-env -D3. Konfigurieren Sie die Browserliste in package.json
{ 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')() ] } } ] },
"browserslist":{ "development":[ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], "production":[ ">0.1%", "not dead", "not op_mini all" ] }CSS komprimieren1. Installieren Sie das Plug-in und referenzieren Sie es
const {resolve}=require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') //设置node.js环境变量,默认是生产环境,配置后为开发环境; process.env.NODE_ENV = 'development';
]
Das obige ist der detaillierte Inhalt vonBeispiel für das Parsen eines Webpacks zum Extrahieren von CSS in separate Dateien (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!