準(zhǔn)備學(xué)習(xí)Web前端工程化的內(nèi)容,做個(gè)記錄,以后需要的時(shí)候方便查找:
webpack只能打包處理.js相關(guān)的文件,其他資源可以使用插件的方式來曲線救國(guó)。
1 安裝處理postCSS文件的loader,運(yùn)行如下命令:
npm i postcss-loader autoprefixer -D
2 在項(xiàng)目根目錄中創(chuàng)建postcss的配置文件postcss.config.js,并開始如下配置:
const autoprefixer = require("autoprefixer"); // 導(dǎo)入自動(dòng)添加前綴的插件
module.exports = {
??? plugins:[ autoprefixer ] // 掛載插件
}?
3 在webpack.config.js的module -> rules數(shù)組中,添加loader規(guī)則如下:
module.exports = {
??? ......
??? plugins:[ htmlPlugin ],
??? module : {
??????? rules:[
??????????? ..........
??????????? {? test:/\.css$/, use:['style-loader','css-loader','postcss-loader']? }
??????? ]
??? }
}