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

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)