前言
之前我們使用的打包 css 無非兩種方式：① 將 css **打包進 入口 js 檔案中；② 使用第三方外掛程式(extract-text-webpack-plugin)實現【注意，該外掛程式在 webpack4 中已經不推薦使用，而且會出現各種莫名其妙的 bug】file-loader正是基於對以上兩種方式缺點的思考，結合我的實際使用過程，我認為以後我們應該完全摒棄掉上述兩種方式，這裡推薦一種一種新的實現方式：file-loader
我先給個 file-loader 的使用說明吧(傳送門：傳統的處理影象在我們的傳統認知中 file-loader 大多是用來處理 影象元素的，其實如果你認真看過上面的那個傳送門的話，才明白我們一直以來是被被誤導了，下面我給出幾個官方的使用例子吧
module.exports = ,
},],
},],
},};
const path = require('path');
const cleanwebpackplugin = require('clean-webpack-plugin');
const htmlwebpackplugin = require('html-webpack-plugin');
module.exports = ,
output: ,
module: ,,]
},plugins: [
new cleanwebpackplugin(['dist']),
new htmlwebpackplugin(,
hash: true
})],
mode: "production"
};
user: ['file-loader?name=[name].bundle[hash].css']等，這裡的寫法就是類似 get 方式的傳參那樣，?符號後面帶引數名即可 webpack4 單獨抽離打包 css 的新實現
前言之前我們使用的打包 css 無非兩種方式 將 css 打包進 入口 js 檔案中 使用第三方外掛程式 extract text webpack plugin 實現 注意，該外掛程式在 webpack4 中已經不推薦使用，而且會出現各種莫名其妙的 bug file loader我先給個 file ...
基於webpack 4靜態資源打包壓縮配置
1.實現靜態資源js css less的打包 壓縮 2.html檔案載入對應的js css img檔案 工程目錄結構如下 使用webpack4 涉及到的檔案配置如下 author jagger license isc devdependencies const path require path h...
webpack4入門 打包基礎配置檔案
npm i webpack 4 npm i webpack cli npm i mini css extract plugin html webpack plugin d 安裝html模板外掛程式 與將css重新整合外掛程式 d將包寫入到開發模式中，package檔案中可見，npm i css lo...