Loaders
webpack 可以使用loader來預(yù)處理文件悯许。這允許你打包除 JavaScript 之外的任何靜態(tài)資源中狂。你可以使用 Node.js 來很簡單地編寫自己的 loader蝶溶。
Loaders需要單獨(dú)安裝并且需要在webpack.config.js中的modules下進(jìn)行配置:
test : 匹配loaders所處理文件的拓展名的正則表達(dá)式
loader:loader的名稱
include/exclude: 手動(dòng)添加必須處理的文件或文件夾或屏蔽不需要處理的文件或文件夾
query:為loaders提供額外的設(shè)置選項(xiàng),不是必須填寫的
樣式
style-loader將模塊的導(dǎo)出作為樣式添加到 DOM 中
css-loader解析 CSS 文件后尔破,使用 import 加載键科,并且返回 CSS 代碼
less-loader加載和轉(zhuǎn)譯 LESS 文件
sass-loader加載和轉(zhuǎn)譯 SASS/SCSS 文件
postcss-loader使用PostCSS加載和轉(zhuǎn)譯 CSS/SSS 文件
stylus-loader加載和轉(zhuǎn)譯 Stylus 文件
npm install --save-dev style-loader css-loaderless-loader lesspostcss-loader
CSS預(yù)處理器
Less Loader、Sass Loader挠锥、Stylus Loader
需要先安裝 postcss-loader 众羡、autoprefixer(自動(dòng)添加前綴的插件)
npm install --save-dev postcss-loader autoprefixer
圖片url-loader
把小圖片轉(zhuǎn)成base64來打包c(diǎn)ss中,在webpack.config.js下面的module的rule下寫規(guī)則一般限制小圖片轉(zhuǎn)base64可以用url-loader蓖租,其他情況都用file-loader粱侣。url-loader應(yīng)該是file-loader上加了一層過濾。
{
test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [{
loader:'url-loader',
query:{
limit:10000,//用的圖片并且會(huì)按照文件大小, 或者轉(zhuǎn)化為 base64, 或者單獨(dú)作為文件,這里大于1kb的圖片會(huì)作為文件
name:'[path][name].[ext]'//在某個(gè)路徑的文件夾下生成那個(gè)圖片名字的文件
}
}]}
轉(zhuǎn)換編譯(Transpiling)
babel-loader加載 ES2015+ 代碼蓖宦,然后使用Babel轉(zhuǎn)譯為 ES5
解析Es6的 babel-preset-es2015 包和解析JSX的 babel-preset-react
npm install --save-dev babel-loader babel-core babel-preset-env?babel-preset-es2015?babel-preset-react
module: {
rules: [
{
test:/(\.jsx|\.js)$/,
use: {
loader:"babel-loader",
options: {
presets: [
"es2015","react"
]
}
},
exclude:/node_modules/
},]
},
juicer-loader juicer模版渲染
npm install--save-dev?juicer?juicer-loader
{
test:/\.juicer$/,
loader:'juicer-loader',
},