webpack4 多帶帶抽離打包 css 的新實現

Scorpion 發布于2019-08-30 15:55 / 873人閱讀

摘要：我是拉丁小毛，歡迎大家關注我哦，一起交流，共同進步。有問題可以郵我哦

webpack4 多帶帶抽離打包 css 的新實現 前言

之前我們使用的打包 css 無非兩種方式：① 將 css 代碼打包進 入口 js 文件中；② 使用第三方插件(extract-text-webpack-plugin)實現【注意，該插件在 webpack4 中已經不推薦使用，而且會出現各種莫名其妙的 bug】
正是基于對以上兩種方式缺點的思考，結合我的實際使用過程，我認為以后我們應該完全摒棄掉上述兩種方式，這里推薦一種一種新的實現方式：file-loader

file-loader

我先給個 file-loader 的使用說明吧(傳送門：https://github.com/webpack-co...；
在我們的傳統認知中 file-loader 大多是用來處理 圖像元素的，其實如果你認真看過上面的那個傳送門的話，才明白我們一直以來是被被誤導了，下面我給出幾個官方的使用例子吧

傳統的處理圖像

module.exports = {
  module: {
    rules: [
      {
        test: /.(png|jpg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {},
          },
        ],
      },
    ],
  },
};

處理 css 【本文重點】

const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: {
        app: "./src1/index.js",
        print: "./src1/print.js"
    },
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            { // loader 圖片
                test: /.(png|svg|jpg|gif)$/,
                use: ["file-loader"]
            },
            { // 處理字體
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    "file-loader"
                ]
            },
            {
                // 多帶帶打包出 css
                test: /.css$/,
                use: ["file-loader"]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(["dist"]),
        new HtmlWebpackPlugin({ 
            title: "webpack4 extract css methord of new",
            template: "./src1/index.html",
            filename: "index.html",
            minify: {
                collapseWhitespace: true
            },
            hash: true
        })
    ],
    mode: "production"
};

上面這個代碼是我親自實測過的，大家可以放心借鑒，使用了 file-loader 來處理 css 后，就不再需要額外的插件了，當然了，如果你需要指定輸出的 css 文件名和路徑，可以這么寫 user: ["file-loader?name=[name].bundle[hash].css"]等，這里的寫法就是類似 get 方式的傳參那樣，?符號后面帶參數名即可

僅供參考，如果你有什么更好的建議可以 contact 我哦

聲明

原創手敲不易，轉載請注明出處，謝謝。我是拉丁小毛，歡迎大家關注我哦，一起交流，共同進步。有問題可以郵我哦(util.you.com@gmail.com)

云服務器 GPU云服務器 JS輕松實現CSS設置抽離懶中抽離 webpack4

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117237.html

webpack4 單獨抽離打包 css 的新實現

摘要：我是拉丁小毛，歡迎大家關注我哦，一起交流，共同進步。有問題可以郵我哦 webpack4 單獨抽離打包 css 的新實現前言之前我們使用的打包 css 無非兩種方式：① 將 css 代碼打包進入口 js 文件中；② 使用第三方插件(extract-text-webpack-plugin)實現【注意，該插件在 webpack4 中已經不推薦使用，而且會出現各種莫名其妙的 bug】正是...

MASAILA 2019-08-23 14:39 評論0 收藏0
CSS Module

摘要：樣式變多后，命名將更加混亂。缺點是不能利用成熟的預處理器或后處理器，和偽類處理起來復雜。經過這樣混淆處理后，名基本就是唯一的，大大降低了項目中樣式覆蓋的幾率。就只能使用預處理器自己的語法來做樣式復用了。一前言CSS 是前端領域中進化最慢的一塊。由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛發展，CSS 被遠遠甩在了后面，逐漸成為大型項目工程化的痛點。也...

mingzhong 2019-08-29 16:06 評論0 收藏0
進擊webpack4 （優化篇）

摘要：進擊基礎篇一進擊基礎篇二配置一進擊基礎篇三配置二不解析不依賴第三方模塊的模塊有一些第三方模塊，它本身不依賴于其他模塊，比如，，不去編譯這些庫，會使得打包更加快速是個正則或者包含正則的數組不去解析忽略進擊webpack 4 （基礎篇一）進擊webpack4 （基礎篇二：配置一）進擊webpack4 （基礎篇三：配置二）不解析不依賴第三方模塊的模塊 noParse 有一些第三方模塊...

isaced 2019-08-23 15:30 評論0 收藏0
webpack4 系列教程(九): CSS Tree Shaking

摘要：按照我們的仿真的環境，最終之后的效果應該是打包后的文件不含有樣式類。如果忘記了它的用法，請查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關插件后，我們需要在的配置中引用第三部分定義的代碼。教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步原文地址有空就來看看個人技術小站, 我一直都在 0. 課程介紹和資料本次課程的代碼目錄(如下圖所示)：s...

趙連江 2019-08-29 16:36 評論0 收藏0
webpack4 系列教程(九): CSS Tree Shaking

摘要：按照我們的仿真的環境，最終之后的效果應該是打包后的文件不含有樣式類。如果忘記了它的用法，請查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關插件后，我們需要在的配置中引用第三部分定義的代碼。教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步原文地址有空就來看看個人技術小站, 我一直都在 0. 課程介紹和資料本次課程的代碼目錄(如下圖所示)：s...

superw 2019-08-23 11:40 評論0 收藏0