国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<s id="s8n79"></s>

Webpack5入門到原理15：提取 Css 成單獨(dú)文件

2年前作者：duansamve分類：Toy博客閱讀(29)違法舉報

這篇具有很好參考價值的文章主要介紹了Webpack5入門到原理15：提取 Css 成單獨(dú)文件。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報違法"按鈕提交疑問。

提取 Css 成單獨(dú)文件

Css 文件目前被打包到 js 文件中，當(dāng) js 文件加載時，會創(chuàng)建一個 style 標(biāo)簽來生成樣式

這樣對于網(wǎng)站來說，會出現(xiàn)閃屏現(xiàn)象，用戶體驗(yàn)不好

我們應(yīng)該是單獨(dú)的 Css 文件，通過 link 標(biāo)簽加載性能才好

1. 下載包

npm i mini-css-extract-plugin -D

2. 配置

webpack.prod.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生產(chǎn)模式需要輸出
    filename: "static/js/main.js", // 將 js 文件輸出到 static/js 目錄中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用來匹配 .css 結(jié)尾的文件
        test: /\.css$/,
        // use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的圖片會被base64處理
          },
        },
        generator: {
          // 將圖片文件輸出到 static/imgs 目錄中
          // 將圖片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件擴(kuò)展名
          // [query]: 添加之前的query參數(shù)
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代碼不編譯
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定檢查文件的根目錄
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 為模板創(chuàng)建文件
      // 新的html文件有兩個特點(diǎn)：1. 內(nèi)容和源文件一致 2. 自動引入打包生成的js等資源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成單獨(dú)文件
    new MiniCssExtractPlugin({
      // 定義輸出文件名和目錄
      filename: "static/css/main.css",
    }),
  ],
  // devServer: {
  //   host: "localhost", // 啟動服務(wù)器域名
  //   port: "3000", // 啟動服務(wù)器端口號
  //   open: true, // 是否自動打開瀏覽器
  // },
  mode: "production",
};

3. 運(yùn)行指令

npm run build

Css 兼容性處理

1. 下載包

npm i postcss-loader postcss postcss-preset-env -D

2. 配置

webpack.prod.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生產(chǎn)模式需要輸出
    filename: "static/js/main.js", // 將 js 文件輸出到 static/js 目錄中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用來匹配 .css 結(jié)尾的文件
        test: /\.css$/,
        // use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解決大多數(shù)樣式兼容性問題
                ],
              },
            },
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解決大多數(shù)樣式兼容性問題
                ],
              },
            },
          },
          "less-loader",
        ],
      },
      {
        test: /\.s[ac]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解決大多數(shù)樣式兼容性問題
                ],
              },
            },
          },
          "sass-loader",
        ],
      },
      {
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解決大多數(shù)樣式兼容性問題
                ],
              },
            },
          },
          "stylus-loader",
        ],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的圖片會被base64處理
          },
        },
        generator: {
          // 將圖片文件輸出到 static/imgs 目錄中
          // 將圖片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件擴(kuò)展名
          // [query]: 添加之前的query參數(shù)
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代碼不編譯
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定檢查文件的根目錄
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 為模板創(chuàng)建文件
      // 新的html文件有兩個特點(diǎn)：1. 內(nèi)容和源文件一致 2. 自動引入打包生成的js等資源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成單獨(dú)文件
    new MiniCssExtractPlugin({
      // 定義輸出文件名和目錄
      filename: "static/css/main.css",
    }),
  ],
  // devServer: {
  //   host: "localhost", // 啟動服務(wù)器域名
  //   port: "3000", // 啟動服務(wù)器端口號
  //   open: true, // 是否自動打開瀏覽器
  // },
  mode: "production",
};

3. 控制兼容性

我們可以在 package.json 文件中添加 browserslist 來控制樣式的兼容性做到什么程度。

{
  // 其他省略
  "browserslist": ["ie >= 8"]
}

想要知道更多的 browserslist 配置，查看browserslist 文檔

以上為了測試兼容性所以設(shè)置兼容瀏覽器 ie8 以上。

實(shí)際開發(fā)中我們一般不考慮舊版本瀏覽器了，所以我們可以這樣設(shè)置：

{
  // 其他省略
  "browserslist": ["last 2 version", "> 1%", "not dead"]
}

4. 合并配置

webpack.prod.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 獲取處理樣式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解決大多數(shù)樣式兼容性問題
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生產(chǎn)模式需要輸出
    filename: "static/js/main.js", // 將 js 文件輸出到 static/js 目錄中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用來匹配 .css 結(jié)尾的文件
        test: /\.css$/,
        // use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
        use: getStyleLoaders(),
      },
      {
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      },
      {
        test: /\.styl$/,
        use: getStyleLoaders("stylus-loader"),
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的圖片會被base64處理
          },
        },
        generator: {
          // 將圖片文件輸出到 static/imgs 目錄中
          // 將圖片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件擴(kuò)展名
          // [query]: 添加之前的query參數(shù)
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代碼不編譯
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定檢查文件的根目錄
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 為模板創(chuàng)建文件
      // 新的html文件有兩個特點(diǎn)：1. 內(nèi)容和源文件一致 2. 自動引入打包生成的js等資源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成單獨(dú)文件
    new MiniCssExtractPlugin({
      // 定義輸出文件名和目錄
      filename: "static/css/main.css",
    }),
  ],
  // devServer: {
  //   host: "localhost", // 啟動服務(wù)器域名
  //   port: "3000", // 啟動服務(wù)器端口號
  //   open: true, // 是否自動打開瀏覽器
  // },
  mode: "production",
};

5. 運(yùn)行指令

npm run build

Css 壓縮

1. 下載包

npm i css-minimizer-webpack-plugin -D

2. 配置

webpack.prod.js文章來源地址http://www.zghlxwxcb.cn/news/detail-820464.html

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

// 獲取處理樣式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解決大多數(shù)樣式兼容性問題
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生產(chǎn)模式需要輸出
    filename: "static/js/main.js", // 將 js 文件輸出到 static/js 目錄中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用來匹配 .css 結(jié)尾的文件
        test: /\.css$/,
        // use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
        use: getStyleLoaders(),
      },
      {
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      },
      {
        test: /\.styl$/,
        use: getStyleLoaders("stylus-loader"),
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的圖片會被base64處理
          },
        },
        generator: {
          // 將圖片文件輸出到 static/imgs 目錄中
          // 將圖片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件擴(kuò)展名
          // [query]: 添加之前的query參數(shù)
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代碼不編譯
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定檢查文件的根目錄
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 為模板創(chuàng)建文件
      // 新的html文件有兩個特點(diǎn)：1. 內(nèi)容和源文件一致 2. 自動引入打包生成的js等資源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成單獨(dú)文件
    new MiniCssExtractPlugin({
      // 定義輸出文件名和目錄
      filename: "static/css/main.css",
    }),
    // css壓縮
    new CssMinimizerPlugin(),
  ],
  // devServer: {
  //   host: "localhost", // 啟動服務(wù)器域名
  //   port: "3000", // 啟動服務(wù)器端口號
  //   open: true, // 是否自動打開瀏覽器
  // },
  mode: "production",
};

3. 運(yùn)行指令

npm run build

到了這里，關(guān)于Webpack5入門到原理15：提取 Css 成單獨(dú)文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請點(diǎn)擊違法舉報進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

Webpack5入門到原理1：前言
開發(fā)時，我們會使用框架（React、Vue），ES6 模塊化語法，Less/Sass 等 css 預(yù)處理器等語法進(jìn)行開發(fā)。這樣的代碼要想在瀏覽器運(yùn)行必須經(jīng)過編譯成瀏覽器能識別的 JS、Css 等語法，才能運(yùn)行。所以我們需要打包工具幫我們做完這些事。除此之外，打包工具還能壓縮代碼、做兼容
2024年01月20日
瀏覽(23)
Webpack5入門到原理2：基本使用
Webpack 是一個靜態(tài)資源打包工具。它會以一個或多個文件作為打包的入口，將我們整個項(xiàng)目所有文件編譯組合成一個或多個文件輸出出去。輸出的文件就是編譯好的文件，就可以在瀏覽器段運(yùn)行了。我們將 Webpack 輸出的文件叫做 bundle。 Webpack 本身功能是有限的: 開發(fā)模式：
2024年01月22日
瀏覽(20)
Webpack5入門到原理21：提升開發(fā)體驗(yàn)
開發(fā)時我們運(yùn)行的代碼是經(jīng)過 webpack 編譯后的，例如下面這個樣子：所有 css 和 js 合并成了一個文件，并且多了其他代碼。此時如果代碼運(yùn)行出錯那么提示代碼錯誤位置我們是看不懂的。一旦將來開發(fā)代碼文件很多，那么很難去發(fā)現(xiàn)錯誤出現(xiàn)在哪里。所以我們需要更加準(zhǔn)確
2024年01月25日
瀏覽(17)
Webpack5入門到原理3：基本配置
在開始使用 Webpack 之前，我們需要對 Webpack 的配置有一定的認(rèn)識。 entry（入口）指示 Webpack 從哪個文件開始打包 output（輸出）指示 Webpack 打包完的文件輸出到哪里去，如何命名等 loader（加載器） webpack 本身只能處理 js、json 等資源，其他資源需要借助 loader，Webpack 才能解析
2024年01月20日
瀏覽(49)
Webpack5入門到原理5：處理樣式資源
我們學(xué)習(xí)使用 Webpack 如何處理 Css、Less、Sass、Scss、Styl 樣式資源 Webpack 本身是不能識別樣式資源的，所以我們需要借助 Loader 來幫助 Webpack 解析樣式資源我們找 Loader 都應(yīng)該去官方文檔中找到對應(yīng)的 Loader，然后使用官方文檔找不到的話，可以從社區(qū) Github 中搜索查詢 Webpack 官
2024年01月21日
瀏覽(21)
Webpack5入門到原理14：生產(chǎn)模式介紹
生產(chǎn)模式是開發(fā)完成代碼后，我們需要得到代碼將來部署上線。這個模式下我們主要對代碼進(jìn)行優(yōu)化，讓其運(yùn)行性能更好。優(yōu)化主要從兩個角度出發(fā): 優(yōu)化代碼運(yùn)行性能優(yōu)化代碼打包速度我們分別準(zhǔn)備兩個配置文件來放不同的配置因?yàn)槲募夸涀兞?，所以所有絕對路徑需要
2024年01月23日
瀏覽(63)
Webpack5入門到原理11：處理 js 資源
有人可能會問，js 資源 Webpack 不能已經(jīng)處理了嗎，為什么我們還要處理呢？原因是 Webpack 對 js 處理是有限的，只能編譯 js 中 ES 模塊化語法，不能編譯其他語法，導(dǎo)致 js 不能在 IE 等瀏覽器運(yùn)行，所以我們希望做一些兼容性處理。其次開發(fā)中，團(tuán)隊(duì)對代碼格式是有嚴(yán)格要求的
2024年01月20日
瀏覽(55)
Webpack5入門到原理12：處理 Html 資源
webpack.config.js 去掉引入的 js 文件，因?yàn)?HtmlWebpackPlugin 會自動引入此時 dist 目錄就會輸出一個 index.html 文件
2024年01月23日
瀏覽(24)
Webpack5入門到原理6：處理圖片資源
過去在 Webpack4 時，我們處理圖片資源通過 file-loader 和 url-loader 進(jìn)行處理現(xiàn)在 Webpack5 已經(jīng)將兩個 Loader 功能內(nèi)置到 Webpack 里了，我們只需要簡單配置即可處理圖片資源 src/images/1.jpeg src/images/2.png src/images/3.gif src/less/index.less src/sass/index.sass src/styl/index.styl 打開 index.html 頁面查看
2024年01月20日
瀏覽(23)
Webpack5入門到原理22：提升打包構(gòu)建速度
開發(fā)時我們修改了其中一個模塊代碼，Webpack 默認(rèn)會將所有模塊全部重新打包編譯，速度很慢。所以我們需要做到修改某個模塊代碼，就只有這個模塊代碼需要重新打包編譯，其他模塊不變，這樣打包速度就能很快。 HotModuleReplacement（HMR/熱模塊替換）：在程序運(yùn)行中，替換、
2024年01月21日
瀏覽(21)

<form id="6iz2t"><small id="6iz2t"></small></form>

<pre id="6iz2t"></pre>