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 我哦