webpack基础使用Loader(三)
loaders:[
{
test:/\.js$/,
loader:'babel-loader',
exclude:__dirname+"/node_modules/", //排除打包的范围(需要绝对路径)
include:__dirname+"src",//指定打包的范围(需要绝对路径)
query:{
presets:['latest']
}
}
]
安装loader:npm install xxx-loader
loaders的参数:1.test:必须满足的条件(正则) 2.exclude:不能满足的条件(loader的排除范围) 3.include:由加载程序转换导入文件的路径或文件数组 (loader处理范围) 4. loader 5.loaders:将串联的loader用数组表示
提高打包的速度:exclude排除打包的范围 include:指定打包的范围。
安装postcss-loader: npm i -D postcss-loader (npm install postcss-loader --save-dev ) 在webpack.config.js的module里配置
rules: [
{
test: /\.css$/,
use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } },'postcss-loader' ]
},
{
test: /\.scss$/,
loaders:['style-loader','css-loader','postcss-loader','sass-loader']
}
]
新建一个文件 postcss.config.js文件:
module.exports = {
"plugins": {
" autoprefixer": {}
}
}
importLoaders: 1 : 表示在css-loader之后指定几个数量的loader来处理import进来的资源
webpack处理模板文件 1.webpack把模板文件当做字符串处理
2.webpack把模板当成已经编辑好的模板的处理函数
webpack 处理图片 file-loader 在模板文件中的图片<img src="${ require('图片路径')}">
{
test: /\.{png|jpg|jif|svg}$/i,
loaders:'file-loader',
query:{
name: 'images/[name]-[hash:5].[ext]'
}
}
url-loader: (base64编码的图片文件)
{
test: /\.{png|jpg|jif|svg}$/i,
loaders:'url-loader',
query:{
limit:20000,
name: 'images/[name]-[hash:5].[ext]'
}
}
转载于:https://www.cnblogs.com/hellowoeld/p/6899421.html
webpack基础使用Loader(三)相关推荐
- webpack基础篇(三):管理资源(image、css、fonts、csv、json5)
目录 1. 处理资源 - loader 1.1 加载css - css-loader 1.2 处理less - less-loader 2. 加载css 2.1 抽离css 自定义分类的css文件名 ...
- webpack基础篇(五):代码分离(Code Splitting)
常用的代码分离方法有三种 1. 入口起点 问题 2. 防止重复 2.1 配置 entry 提取公用依赖 2.2 SplitChunksPlugin 3. 动态导入 3.1 import() 动态导入 ...
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- webpack基础webpack-dev-server配置
webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server 一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根 ...
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server - QxQstar - 博客园
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- 《nodejs+gulp+webpack基础实战篇》课程笔记(六)--附加课
一.多页面分离资源引用,按需引用JS和css 我们前面实现了以下功能:1.新建了一个login模版(用到htmlWebpackPlugin).2.分别把main.js和login.js.reg.js分 ...
- webpack基础教程
webpack基础教程 一 webpack五大核心 二 webpack处理css资源 三 webpack处理less.scss.sass.styl资源 四 webpack-module的详细配置 五 ...
- webpack基础版及其常用插件分享超详细~~
webpack的作用 打包.把多个文件打成个数更小的文件. 支持模块化 优化: 代码压缩,加密 掌握webpack的基本使用: 配置webpack.config.js 基本使用 入口 出口 loade ...
- 《nodejs+gulp+webpack基础实战篇》课程笔记(四)-- 实战演练
一.用gulp 构建前端页面(1)---静态构建 npm install gulp-template --save-dev 通过这个插件,我们可以像写后台模板(譬如PHP)一样写前端页面.我们首先学习 ...
最新文章
- 【Opencv】直方图函数 calchist()
- 如何理解段路由(SPRING)?—Vecloud微云
- beyond compare 不自动比较解决办法(没解决,可以ctrl + F5手动比较)
- iOS项目开发— CoreLocation的定位服务和地理编码与发编码实现
- php xml 空格,php闭合标签输出多余空行使xml页面显示错误的处理
- centos 卸载vsftp
- [转] js前端解决跨域问题的8种方案(最新最全)
- Matlab与C/C++混合编程 Matlab调用C函数
- 批量梯度下降算法BGD
- 跟我一起写大虾网(第0天)
- python大师_GitHub - lltx/Python-100-Days: Python - 100天从新手到大师
- 如何解决设备管理中的难点?
- 极域电子书包课堂管理系统
- Linux内核源码的组织结构
- illumina测序两束激发光分别是什么颜色,A/T/C/G四个碱基又分别标记了什么颜色的荧光素呢?
- linux ffmpeg Unknown encoder 'h264'
- mac电脑卸载LVSecurityAgent监控软件
- matlab画左右半圆
- 苏嵌//张朋//2018.07.16
- 项目:家庭收入支出记账软件(JAVA语言)