Contoh menghuraikan webpack untuk mengekstrak css ke dalam fail berasingan (kod dilampirkan)

Artikel ini membawakan anda pengetahuan yang berkaitan tentang javascript terutamanya isu yang berkaitan dengan pengekstrakan css ke dalam fail berasingan, termasuk pemprosesan keserasian css dan pemampatan css Mari kita lihat bersama-sama akan membantu semua orang.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Ekstrak css ke dalam fail berasingan

1 Pasang pemalam dan perkenalkan

npm install mini-css-extract-plugin -D
const  MiniCssExtractPlugin = require('mini-css-extract-plugin')

2 Konfigurasikan pemalam pemalam

plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename:'css/built.css'//对输出的文件进行重命名,默认为main.css
        })
    ],

3. Ubah suai fail pemuat <.>

{
   test:/.css$/,
   use:[
      //取代css-loader,提取js中css成单独文件（注意）
       MiniCssExtractPlugin.loader,
       //将css文件整合到JS文件中
      'css-loader',
   ]
},

Pemprosesan seksual serasi css

1. Pasang pemalam

npm install postcss-loader postcss-preset-env -D

2 Konfigurasikan pemuat postcss dalam modul dan konfigurasikan pratetap postcss- env plug-in

{
                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. Konfigurasi senarai pelayar dalam package.json

"browserslist":{
    "development":[
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production":[
      ">0.1%",
      "not dead",
      "not op_mini all"
    ]
  }

4 Untuk menjadikan persekitaran pembangunan dalam senarai pelayar dalam package.json berkesan, anda perlu konfigurasikan persekitaran dalam webpack.config.js, kerana lalainya ialah persekitaran pengeluaran, yang kami perlukan untuk pembangunan Persekitaran pembangunan

const {resolve}=require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const  MiniCssExtractPlugin = require('mini-css-extract-plugin')
//设置node.js环境变量,默认是生产环境，配置后为开发环境；
 process.env.NODE_ENV = 'development';

Mampat css

1 Pasang pemalam dan rujuknya

npm install optimize-css-assets-webpack-plugin -D
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

2. Konfigurasikan pemalam dalam pemalam

plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename:'css/built.css'//对输出的文件进行重命名
        }),
        //压缩css文件
        new OptimizeCssAssetsWebpackPlugin()
    ],

[Tutorial video berkaitan yang disyorkan:

Tutorial Bermula Vuejs, Mendapatkan Bermula dengan Web Front-end]

Atas ialah kandungan terperinci Contoh menghuraikan webpack untuk mengekstrak css ke dalam fail berasingan (kod dilampirkan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!