webpack4 單獨抽離打包 css 的新實現
阿新 • • 發佈：2019-01-12
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 我哦