webpack 之loader
webpack的作用:
是 用来处理我们写的js代码。并且会自动处理js之间相关的依赖。 但是,开发中我们不仅仅有基本的js代码处理,还需要加载css,图片,也包括一些高级的
将ES6转成ES5代码,将Typescript转成ES5代码,将scss、less转成css,将.jsx、.vue文件转成
js文件等等。这时候就需要给webpack拓展对应的loader loader使用过程:
步骤一:通过npm安装需要使用的loader
npm install --save-dev css-loader
npm install --save-dev style-loader npm install --save-dev url-loader
npm install --save-dev file-loader
// es6 => es5
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
步骤二:在webpack.config.js中的module关键字下进行配置 const path = require('path'); // 导入path模块 ,由于依赖node,所以必须要有package.json,即创建项目 module.exports = {
entry : './src/index.js', // 入口
output : {
path : path.resolve(__dirname,'dist'), // 这里必须用绝对路径
filename : 'bundle.js', // 出口,
publicPath: 'dist/', // 配置url文件路径
},
module:{
rules:[
{
test:/\.css$/,
// css-loader只负责将css文件进行加载
// style-loader负责将样式添加到DOM中
// 使用多个loader时。是从右向左
use:['style-loader','css-loader',]
},
{
test:/\.(png|jpg|gif|jpeg)$/,
use:[
{
loader:'url-loader',
options:{
// 当加载的图片,小于limit时,会将图片编译成base64字符串形式
// 当加载的图片,大于limit时,需要使用file-loader模块进行加载
limit: 8196,
name: 'img/[name].[hash:8].[ext]' // 名称规则
}, }
]
},
// babel配置(es6 => es5)
{
test:/\.js/,
// exclude:排除
exclude:/(node_modules|bower_components)/,
use:{
loader:'babel-loader',
options:{
presets:['es2015']
}
}
}
]
}
}
步骤三:在入口js文件中引用css文件
// js文件依赖css文件
require('./css/normal.css') // css文件依赖资源文件
body {
background: url(../img/zdj.jpg)
}
这样一来,运行npm run bulid就能直接打包css、资源文件,es6 => es5了
webpack 之loader的更多相关文章
- webpack之loader实践
初识前端模板概念的开发者,通常都使用过underscore的template方法,非常简单好用,支持赋值,条件判断,循环等,基本可以满足我们的需求. 在使用Webpack搭建开发环境的时候,如果要使用 ...
- webpack之loader和plugin简介
webpack之loader和plugin简介 webpack入门和实战(二):全面理解和运用loader和plugins webpack入门(四)——webpack loader 和plugin w ...
- webpack之Loader
我们知道webpack的优点之一就是专注于处理模块化的项目,能做到开箱即用,但同时这也是webpack的缺点,只能用于模块化开发的项目,例如:Vue,React,Angular.Webpack在进行打 ...
- Webpack 之 Loader 的使用
安装 loaders 如果loader在npm里,可以这样安装: $ npm install xxx-loader --save 或者 $ npm install xxx-loader --save- ...
- webpack中loader和plugin的概念理解
对于 loader ,它就是一个转换器,将A文件进行编译形成B文件,这里操作的是文件,比如将 A.scss 或 A.less 转变成 B.css,单纯的文件转换过程: 对于 plugin,它就是一个扩 ...
- webpack进阶--loader
webpack的核心就是它的配置文件,只要配置好配置文件webpack就可以用得利索-- 而配置文件主要就是7个部分entry.output.plugins.resolve.devserver(web ...
- webpack css loader 使用
备注: 接上面的项目 1. 添加css main.css #app { text-align:center; } main.js require("./main.css"); ...
- webpack 之 loader
loader简介 loader在webpack.config.js中进行配置,配置之后,会自动检测打包过程中引入的文件(import或require),通过test成功匹配被引入的文件名后,会对文件内 ...
- webpack的loader的原理和实现
想要实现一个loader,需要首先了解loader的基本原理和用法. 1. 使用 loader是处理模块的解析器. module: { rules: [ { test: /\.css$/, use: ...
- webpack自定义loader并发布
一.官网对loader的解释: 1.loader 是导出为一个函数的 node 模块.该函数在 loader 转换资源的时候调用.给定的函数将调用 loader API,并通过 this 上下文访问. ...
随机推荐
- 【JZOJ 5048】【GDOI2017模拟一试4.11】IQ测试
题目大意: 判断一个序列是否是另外一个序列删除若干个数字之后得到的. 正文: 我们可以定义两个指针,分别指向长序列和短序列. 拿样例来举例: 如果指针指的数相同,两个指针都往右跳: 如果不同,则指向长 ...
- Lucene之查询索引
Query子类 TermQuery:根据域和关键词进行搜索 /** * termQuery根据域和关键词进行搜索 */ @Test public void termQuery() throws IOE ...
- 剑指offer-面试题59_2-队列的最大值-队列
/* 题目: 定义一个含max函数的队列类,并实现pop_front().push_back().max()函数. */ #include<iostream> #include<cs ...
- IDAE快捷键与设置
以前做项目的时候都是用Eclispe,来到新的公司发现IDE用的是IDEA集成开发工具,以前也用过IDEA,只是略懂略懂,以后你会发现,当你用IDEA的快捷键的时候,会6的飞起 1.IDEA常用快捷键 ...
- 【Android】安卓Q适配指南-相册
碎碎念 本来每次安卓版本升级都是非常期待的事情,但是开发者就吃苦了!!! 尤其是从Q开始,应用采用沙盒模式,即各种公共文件的访问都会受到限制... 所以适配Q成了当务之急,然鹅网上关于适配的资料少之又 ...
- int16、int32、int64的范围
做了一个 项目本地测了没问题发布到正式环境上,几天之后有个统计页面报错了,看了本地是正常的, 于是就排查,发现 ID 列 在对 字符串转int 时候 由于用了 Convert.TonInt16 长度不 ...
- kali2020更换中科大的更新源
kali2020更换中科大的更新源 中科大的源地址 deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contrib deb ...
- Redis的各个数据的类型基本命令
什么是Redis: 概念: Redis (REmote DIctionary Server) 是用 C 语言开发的一个开源的高性能键值对(key-value)数据库. 特征:1. 数据间没有必然的关联 ...
- MyBatis的延迟加载和缓存机制
延迟加载: 什么是延迟加载: MyBatis中的延迟加载,也称为懒加载,是指在进行关联查询时,按照设置延迟规则推迟对关联对象的select查询.延迟加载可以有效的减少数据库压力. MyBatis根据对 ...
- Centos中Python升级为3.X时yum出现except OSError, e: ^ SyntaxError: invalid syntax问题 No module named 'pip._internal.main
CentOS 7升级Python到3.7.2后,需要在/usr/bin/python创建了一个指向Python 3的软连接,然后将/usr/bin/yum的顶部的: !/usr/bin/python ...