详解webpack进阶之loader篇
时间:2019-03-31
本文章向大家介绍详解webpack进阶之loader篇,主要包括详解webpack进阶之loader篇使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
webpack的loaders是一大特色,也是很重要的一部分。这遍博客我将分类讲解一些常用的laoder
一、loaders之 预处理
- css-loader 处理css中路径引用等问题
- style-loader 动态把样式写入css
- sass-loader scss编译器
- less-loader less编译器
- postcss-loader scss再处理
npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader
栗子:
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处理
- babel-loader
- jsx-loader
npm install --save-dev babel-core babel-preset-es2015 babel-loader jsx-loader
栗子
新建一个名字为.babelrc的文件
{ "presets": ["es2015","react"], "plugins":["antd"] }
新建一个名字为webpack.config.js文件
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之 图片处理
url-loader
npm install --save-dev url-loadr
module: { loaders: [ {test: /\.(jpg|png)$/, loader: "url?limit=8192"}, ] }
四、loaders之 文件处理
file-loader
npm install --save-dev file-loader
module: { loaders: [ { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, loader: 'file' }, ] }
五、loaders之 json处理
json-loader
npm install --save-dev json-loader
module: { loaders: [ {test: /\.json$/,loader: 'json'}, ] }
六、loaders之 html处理
raw-loader
npm install --save-dev raw-loader
module: { loaders: [ { test: /\.html$/,loader: 'raw'}, ] }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- WordPress后台首页显示RSS错误的解决办法
- ASM 翻译系列第十九弹:ASM Internal ASM Continuing Operations Directory
- ASM 翻译系列第二十五弹:ASM 高级知识 When will my rebalance complete
- ASM 翻译系列第二十六弹:ASM 高级知识 Where is my data
- LVS+Keepalived负载均衡主备&双主架构全攻略
- ASM 翻译系列第二十八弹:ASM INTERNAL Partnership and Status Table
- ASM 翻译系列第二十九弹:ASM INTERNAL Free Space Table
- MySql常用30种SQL查询语句优化方法
- RxJS速成
- 会HTML/CSS就可以轻松创建网站
- 区块链银行应用探索(Hyperledger fabric)
- mysql之基本语法
- mysql之索引的工作机制
- Mysql之锁与事务
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- input子系统剖析
- MySQL 主从架构原理
- 从后端到前端之Vue(六)表单组件 HTML5原生的表单和表单元素Vue组件的基础知识表单元素组件辅助工具开源
- OpenAI Gym 入门
- 常见编程模式之合并区间
- chmod 777 是开发的常规操作吗?
- 手把手教你进行Anaconda的安装
- 浅析Python基础知识之面向对象
- 手把手教你用Python进行SSH暴力破解
- 一文学会注解的正确使用姿势
- 面试官:请算出走迷宫需要的最少步数
- lua执行redis脚本找不到脚本的问题
- Android |《看完不忘系列》之dagger
- Android | dagger细枝篇
- ES UpdateByQuery Java Api