webpack进阶之loader篇
webpack的loaders是一大特色,也是很重要的一部分。这遍博客我将分类讲解一些常用的laoder 一、loaders之 预处理
栗子: module: { loaders: [ {test: /.css$/,loader: "style!css?sourceMap!postcss"},{test: /.less$/,loader: "style!css!less|postcss"},{test: /.scss$/,loader: "style!css!sass|postcss"} ] } 二、loaders之 js处理
栗子 新建一个名字为 { "presets": ["es2015","react"],"plugins":["antd"] } 新建一个名字为 module.exports ={ entry: './entry.js',output: { path: __dirname,filename: 'bundle.js' },module: { loaders: [ {test: /.js$/,loader: "babel",exclude: /node_modules/},{test: /.jsx$/,loader: "jsx-loader"} {test: /.css$/,loader: 'style!css'} ] } }; 三、loaders之 图片处理
module: { loaders: [ {test: /.(jpg|png)$/,loader: "url?limit=8192"},] } 四、loaders之 文件处理
module: { loaders: [ { test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,loader: 'file' },] } 五、loaders之 json处理
module: { loaders: [ {test: /.json$/,loader: 'json'},] } 六、loaders之 html处理
module: { loaders: [ { test: /.html$/,loader: 'raw'},] } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |