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. Javascript如何实现GPU加速?

    一.什么是Javascript实现GPU加速? CPU与GPU设计目标不同,导致它们之间内部结构差异很大.CPU需要应对通用场景,内部结构非常复杂.而GPU往往面向数据类型统一,且相互无依赖的计算.所 ...

  2. Jmeter(十二)_打印时间戳

    Jmeter中提供了一种函数,可以打印时间戳,如下图 年: yyyy 月:MM 日:dd 时: HH 分: mm 秒:ss 关于时间戳的格式,可以自由组合定义,这里我写成这样 yyyy-MM-dd H ...

  3. docker之故障问题解决方案

    1.报错如下一 Error response from daemon: driver failed programming external connectivity on endpoint lnmp ...

  4. zabbix3.4 实现sendEmail邮件报警

    zabbix3.4实现sendEmail邮件报警 转发:https://www.cnblogs.com/pythonal/p/7813948.html sendEmail是一个轻量级,命令行的SMTP ...

  5. Java+Netty、Vue+Element-UI实现的即时通信应用 leo-im

    之前工作接触了几个开源的IM产品,再加上曾经用Netty实现过几个服务,于是就有了用Netty实现一个IM的想法,于是用业余时间写了一个IM,和喜欢Netty的程序员们分享. 考虑到方便扩展,在服务端 ...

  6. VS2010带不出System.Data.OracleClient这个引用的解决方案

    在使用VS2010的时候有时会带不出System.Data.OracleClient这个引用,可以使用以下解决方法: 右击项目的属性,在弹出窗口中有一个“目标框架”下拉框选项,默认会是.NET FRA ...

  7. 32bit 天堂2脚本修改资料大全【客户端+服务端】

    该资料夹中所有教程资料全部适合天堂2初章32位服务端的脚本修改,已经1.2章相关客户端的修改. https://pan.baidu.com/s/1RuGMFNgERd2JMYQpdceQwg 提取码: ...

  8. 学习笔记 | CDQ分治

    目录 前言 啥是CDQ啊(它的基本思想) 例题 后记 参考博文 前言 博主太菜了 学习快一年的OI了 好像没有什么会的算法 更寒碜的是 学一样还不精一样TAT 如有什么错误请各位路过的大佬指出啊感谢! ...

  9. Linux内核分析——第六周学习笔记

    进程的描述和进程的创建 前言:以下笔记除了一些讲解视频中的概念记录,图示.图示中的补充文字.总结.分析.小结部分均是个人理解.如有错误观点,请多指教! PS.实验操作会在提交到MOOC网站的博客中写.

  10. 在centOS中安装mongodb

    自己在一个CentOS6.6的系统中按照官网的说明,走了一遍的安装过程,记录一下. 看过个mongo的视频,上面介绍的安装是用源码安装,而官网上说需要gcc4.8.3的版本,还有scons的编译工具, ...