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. 带阴影的圆形 QLabel

    带阴影的圆形 Label 来自: 公孙二狗

  2. 如何写论文的introduction

    重要的是写Introduction.写Introduction就和写童话一样.(转自知乎珵cici) 1. 有一条巨龙抓走了公主 (介绍你的问题为什么值得研究) 2. 巨龙是多么多么多么难打(强调你的 ...

  3. Codeforces 948D Perfect Security(字典树)

    题目链接:Perfect Security 题意:给出N个数代表密码,再给出N个数代表key.现在要将key组排序,使key组和密码组的亦或所形成的组字典序最小. 题解:要使密码组里面每个数都找到能使 ...

  4. Jq_SetTimeOut

    倒计时 59 秒: var t function timedCount() { document.getElementById('txt').value=c ){ c--; }else{ clearT ...

  5. jmeter分布式压力测试之添加压力机

    前提:多台电脑可以互相ping通 1.jmeter的bin目录下的jmeter.properties配置文件里面remote_hosts添加测试机的 IP:端口号,用英文“,”逗号间隔例如:remot ...

  6. docker 学习笔记(2)--doucker file命令

    FROM base       ---- imageRUN                  ---- 执行命令ADD   ---- 添加文件COPY         ---- 拷贝文件CMD    ...

  7. 第二个Sprint计划

    第一个Sprint计划已完成基本框架,接着第二个计划 时间:5月30-6月3日 目标:能够将各个框架连接起来,实现基本功能,并查看数据库连接. 分工:杜殷浩:查看数据库连接,创建数据库. 何广强:实现 ...

  8. Python正则表达式使用

    Python正则表达式使用 参考资料: Python正则表达式| 菜鸟教程 Python正则表达式详解 - 我当道士那儿些年 - 博客园 前言 由于遇到一个提取字符串某个子串的问题,刚开始使用了暴力方 ...

  9. 读C#程序最小公倍数答案就是:2123581660200

    阅读下面程序,请回答如下问题: 问题1:这个程序要找的是符合什么条件的数? 问题2:这样的数存在么?符合这一条件的最小的数是什么? 问题3:在电脑上运行这一程序,你估计多长时间才能输出第一个结果?时间 ...

  10. ESXi 系统管理员命令 [转帖]

    来源 https://blog.csdn.net/zy_strive_2012/article/details/53336000 正如所有的虚拟化管理员都知道,要应对VMware基础设施上需要的更多虚 ...