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的更多相关文章

  1. webpack进阶构建项目(一)

    webpack进阶构建项目(一) 阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解ba ...

  2. webpack之loader实践

    初识前端模板概念的开发者,通常都使用过underscore的template方法,非常简单好用,支持赋值,条件判断,循环等,基本可以满足我们的需求. 在使用Webpack搭建开发环境的时候,如果要使用 ...

  3. webpack之loader和plugin简介

    webpack之loader和plugin简介 webpack入门和实战(二):全面理解和运用loader和plugins webpack入门(四)——webpack loader 和plugin w ...

  4. webpack进阶用法你都get到了么?

    如何消除无用代码:打包自己的私有js库:实现代码分割和动态import提升初次加载速度:配置eslint规范团队代码规范:打包异常抓捕你都get到了么? 摇树优化:Tree Shaking webpa ...

  5. webpack之Loader

    我们知道webpack的优点之一就是专注于处理模块化的项目,能做到开箱即用,但同时这也是webpack的缺点,只能用于模块化开发的项目,例如:Vue,React,Angular.Webpack在进行打 ...

  6. webpack进阶之loader篇

    webpack的loaders是一大特色,也是很重要的一部分.这遍博客我将分类讲解一些常用的laoder 一.loaders之 预处理 css-loader 处理css中路径引用等问题 style-l ...

  7. [转]webpack进阶构建项目(一)

    阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解babel-loader加载器 6.理 ...

  8. webpack进阶之插件篇

    一.插件篇 1. 自动补全css3前缀 autoprefixer 官方是这样说的:Parse CSS and add vendor prefixes to CSS rules using values ...

  9. Webpack 之 Loader 的使用

    安装 loaders 如果loader在npm里,可以这样安装: $ npm install xxx-loader --save 或者 $ npm install xxx-loader --save- ...

随机推荐

  1. 配置yum,nc,telnet

    一.学习中问题 最近学习在学习Hadoop的一个子项目Zookeeper,在测试其中的“四字命令”---”echo ruok|nc localhost 2181“时发现命令无法被识别,如下图所示: [ ...

  2. 项目 - RM 部署上centos7 之后出现的一些问题和解决方法

    系统版本: [root@localhost logs]# cat /etc/redhat-release CentOS Linux release (Core) 获取方法来自:https://www. ...

  3. More Effective C++ Item14:明智运用exception specifications

    使用exception specifications你必须非常仔细去确保,函数调用的子函数.注册的回调函数不会违背约定.而设计模板内部的异常更难确保. 设计回调机制的时候,如果调用方规定了不抛出异常, ...

  4. mongodump备份小量分片集群数据

    1.使用mongodump备份小量分片集群数据 如果一个分片集群的数据集比较小,可以直接使用mongodump连接到mongos实例进行数据备份.默认情况下,mongodump到非primary的节点 ...

  5. 区块链学习:Windows下搭建以太坊私有链环境

    一:安装geth客户端 Windows要求必须是64位系统,从官方网站下载编译好的win64客户端,下载解压后只有一个Geth.exe问价,运行安装即可,下载地址如下: https://github. ...

  6. Arcengine效率探究之一——属性的读取(转载)

    http://blog.csdn.net/lk103852503/article/details/6566652 在写一个对属性表的统计函数时,发现执行速度奇慢无比,百思不得其解,其实算法并不复杂,后 ...

  7. jmeter学习(1)基础支持+安装部署

    1. Apache jmeter 是100%的java桌面应用程序 支持的协议有:WEB-HTTP/HTTPS   , SOAP,   FTP,  JDBC,  LDAP, MAIL, MongoDB ...

  8. mysql学习(1)

    开始我们基础的mysql学习 第一部分:补充知识 1. 昨天讲到的mysql初始化密码为空,今天又get到一种新的方法 Mysql安装后需要做的 Mysql安装成功后,默认的root用户密码为空,你可 ...

  9. ContentProvider示例

    http://hi.baidu.com/pekdou/item/b2a070c37552af210831c678 首先,我自己是各初学者,网上一些关于ContentProvider的例子也不少,我自己 ...

  10. 作业 20181204-5 Final阶段贡献分配规则及实施

    此作业要求参见:[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2479] 小组介绍 组长:付佳 组员:张俊余 李文涛 孙赛佳 田良 于洋 ...