webpack进阶--loader
webpack的核心就是它的配置文件,只要配置好配置文件webpack就可以用得利索~~
而配置文件主要就是7个部分entry、output、plugins、resolve、devserver(webpack3.6热更新)、devtool(调试工具)、我们今天要讲的module:rules(或者loaders)
我们今天要讲的loader也是在webpack.config.js里面配置的:
//webpack.config.js
const path = require('path');
const htmlPlugin = require('html-webpack-plugin'); module.exports = {
entry: './src/app.js',
output:{
path: path.resolve(__dirname,'./dist'),
filename: '[name].bundle.js'
},
resolve: {
extensions: ['', '.js', '.vue'] //这里是import的时候不带后缀,webpack帮我们自动查看的后缀列表
},
plugins:[
new htmlPlugin({
template : './index.html',
filename: 'index.html'
})
],
module:{
rules:[
{
test: /\.js$/,
loader: 'babel-loader',
query:{presets:['latest']},
exclude: path.resolve(__dirname,'./node_modules')
},{
test: /\.css$/,
loader: 'style-loader!css-loader',
},{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader',
},{
test: /\.html$/,
loader: 'html-loader',
},{
test: /\.(jpg|png|gif|svg)$/i,
use: ['url-loader?limit=500&name=images/[name]-[hash:5].[ext]','image-webpack-loader'],
}
]
}
}
webpack的use可以换成loader或者loaders,loader传字符串,loaders传数组,use和loaders一样
babel-loader需要按官网上面说的一样,安装3个东西(2个时编译器,一个是预设):
npm i babel-loader babel-core babel-preset-latest -D
style-loader是把解析好的css文件以<style></style>的方式插入网页
css-loader是解析css文件
npm i css-loader style-loader -D
sass-loader处理sass
npm i node-sass sass-loader -D
html-loader处理html
npm i html-loader -D
image-wepack-loader 压缩图片
url-loader 图片转base64,传参limit,小于limit kb时转base64,否则传给file-loader
file-loader 直接打包图片,必须安装这个~~
总结:
css代码import入js文件就行了,而html必须最后要在app的dom渲染到
webpack进阶--loader的更多相关文章
- webpack进阶构建项目(一)
webpack进阶构建项目(一) 阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解ba ...
- webpack之loader实践
初识前端模板概念的开发者,通常都使用过underscore的template方法,非常简单好用,支持赋值,条件判断,循环等,基本可以满足我们的需求. 在使用Webpack搭建开发环境的时候,如果要使用 ...
- webpack之loader和plugin简介
webpack之loader和plugin简介 webpack入门和实战(二):全面理解和运用loader和plugins webpack入门(四)——webpack loader 和plugin w ...
- webpack进阶用法你都get到了么?
如何消除无用代码:打包自己的私有js库:实现代码分割和动态import提升初次加载速度:配置eslint规范团队代码规范:打包异常抓捕你都get到了么? 摇树优化:Tree Shaking webpa ...
- webpack之Loader
我们知道webpack的优点之一就是专注于处理模块化的项目,能做到开箱即用,但同时这也是webpack的缺点,只能用于模块化开发的项目,例如:Vue,React,Angular.Webpack在进行打 ...
- webpack进阶之loader篇
webpack的loaders是一大特色,也是很重要的一部分.这遍博客我将分类讲解一些常用的laoder 一.loaders之 预处理 css-loader 处理css中路径引用等问题 style-l ...
- [转]webpack进阶构建项目(一)
阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解babel-loader加载器 6.理 ...
- webpack进阶之插件篇
一.插件篇 1. 自动补全css3前缀 autoprefixer 官方是这样说的:Parse CSS and add vendor prefixes to CSS rules using values ...
- Webpack 之 Loader 的使用
安装 loaders 如果loader在npm里,可以这样安装: $ npm install xxx-loader --save 或者 $ npm install xxx-loader --save- ...
随机推荐
- 配置yum,nc,telnet
一.学习中问题 最近学习在学习Hadoop的一个子项目Zookeeper,在测试其中的“四字命令”---”echo ruok|nc localhost 2181“时发现命令无法被识别,如下图所示: [ ...
- 项目 - RM 部署上centos7 之后出现的一些问题和解决方法
系统版本: [root@localhost logs]# cat /etc/redhat-release CentOS Linux release (Core) 获取方法来自:https://www. ...
- More Effective C++ Item14:明智运用exception specifications
使用exception specifications你必须非常仔细去确保,函数调用的子函数.注册的回调函数不会违背约定.而设计模板内部的异常更难确保. 设计回调机制的时候,如果调用方规定了不抛出异常, ...
- mongodump备份小量分片集群数据
1.使用mongodump备份小量分片集群数据 如果一个分片集群的数据集比较小,可以直接使用mongodump连接到mongos实例进行数据备份.默认情况下,mongodump到非primary的节点 ...
- 区块链学习:Windows下搭建以太坊私有链环境
一:安装geth客户端 Windows要求必须是64位系统,从官方网站下载编译好的win64客户端,下载解压后只有一个Geth.exe问价,运行安装即可,下载地址如下: https://github. ...
- Arcengine效率探究之一——属性的读取(转载)
http://blog.csdn.net/lk103852503/article/details/6566652 在写一个对属性表的统计函数时,发现执行速度奇慢无比,百思不得其解,其实算法并不复杂,后 ...
- jmeter学习(1)基础支持+安装部署
1. Apache jmeter 是100%的java桌面应用程序 支持的协议有:WEB-HTTP/HTTPS , SOAP, FTP, JDBC, LDAP, MAIL, MongoDB ...
- mysql学习(1)
开始我们基础的mysql学习 第一部分:补充知识 1. 昨天讲到的mysql初始化密码为空,今天又get到一种新的方法 Mysql安装后需要做的 Mysql安装成功后,默认的root用户密码为空,你可 ...
- ContentProvider示例
http://hi.baidu.com/pekdou/item/b2a070c37552af210831c678 首先,我自己是各初学者,网上一些关于ContentProvider的例子也不少,我自己 ...
- 作业 20181204-5 Final阶段贡献分配规则及实施
此作业要求参见:[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2479] 小组介绍 组长:付佳 组员:张俊余 李文涛 孙赛佳 田良 于洋 ...