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- ...
随机推荐
- 带阴影的圆形 QLabel
带阴影的圆形 Label 来自: 公孙二狗
- 如何写论文的introduction
重要的是写Introduction.写Introduction就和写童话一样.(转自知乎珵cici) 1. 有一条巨龙抓走了公主 (介绍你的问题为什么值得研究) 2. 巨龙是多么多么多么难打(强调你的 ...
- Codeforces 948D Perfect Security(字典树)
题目链接:Perfect Security 题意:给出N个数代表密码,再给出N个数代表key.现在要将key组排序,使key组和密码组的亦或所形成的组字典序最小. 题解:要使密码组里面每个数都找到能使 ...
- Jq_SetTimeOut
倒计时 59 秒: var t function timedCount() { document.getElementById('txt').value=c ){ c--; }else{ clearT ...
- jmeter分布式压力测试之添加压力机
前提:多台电脑可以互相ping通 1.jmeter的bin目录下的jmeter.properties配置文件里面remote_hosts添加测试机的 IP:端口号,用英文“,”逗号间隔例如:remot ...
- docker 学习笔记(2)--doucker file命令
FROM base ---- imageRUN ---- 执行命令ADD ---- 添加文件COPY ---- 拷贝文件CMD ...
- 第二个Sprint计划
第一个Sprint计划已完成基本框架,接着第二个计划 时间:5月30-6月3日 目标:能够将各个框架连接起来,实现基本功能,并查看数据库连接. 分工:杜殷浩:查看数据库连接,创建数据库. 何广强:实现 ...
- Python正则表达式使用
Python正则表达式使用 参考资料: Python正则表达式| 菜鸟教程 Python正则表达式详解 - 我当道士那儿些年 - 博客园 前言 由于遇到一个提取字符串某个子串的问题,刚开始使用了暴力方 ...
- 读C#程序最小公倍数答案就是:2123581660200
阅读下面程序,请回答如下问题: 问题1:这个程序要找的是符合什么条件的数? 问题2:这样的数存在么?符合这一条件的最小的数是什么? 问题3:在电脑上运行这一程序,你估计多长时间才能输出第一个结果?时间 ...
- ESXi 系统管理员命令 [转帖]
来源 https://blog.csdn.net/zy_strive_2012/article/details/53336000 正如所有的虚拟化管理员都知道,要应对VMware基础设施上需要的更多虚 ...