Ⅰ 【Webpack4】CSS 配置之 postcss-loader
postcss-loader 應該是 Webpack 配置中不可或缺的一個 CSS loader。它負責進一步處理 CSS 文件,比如添加瀏覽器前綴,壓縮 CSS 等。
配置 postcss-loader 時,可以在 webpack.config.js 中配置具體選項,也可以新建一個 postcss.config.js ,專門定義 postcss-loader 的配置。
這篇文檔基於依賴包版本:
推薦使用文件 postcss.config.js 的方式:
env 取值 process.env.NODE_ENV ,可用來判斷是開發模式還是生產模式。
當然也可以在 webpack.config.js 中,只是寫起來有點冗餘,尤其是需要在多個規則中用到 postcss-loader 時:
壓縮 CSS 其他方法可以參考 Webpack 文檔中 這一段 。
用 style-loader 時:
用 MiniCssExtractPlugin 時, 注意 sourcemap 得配置成「 inline 」,不然調試時仍舊無法定位到 .less 源碼,只能定位到編譯後的 CSS 文件。