webpack入门进阶(3)
1.11.预处理器文件处理
1.sass文件
sass这种css预处理器是以.scss结尾,需要用node-sass和sass-loader来处理
安装loader
npm i node-sass sass-loader -D
增加相关配置:
webapck.base.js
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"]
}
]
}
注意: 如果出现css文件中引入sass文件的情况,只用css-loader是不能解析的,必须加入sass-loader,并且需要在css-loader中声明,使用sass-loader才可以
举个例子: index.css 引入 a.css , a.css引入a.scss,这个时候需要增加配置才行
{
test: /\.css$/,
use: [
"style-loader",
// 需要把原来的字符串换成对象的形式,然后给css-loader配置参数
{
loader: "css-loader",
options: {
// 如果css文件引入其他文件(@import), 使用后面的1个loader来处理
importLoaders: 2
}
},
// "css-loader",
"postcss-loader",
"sass-loader"
]
},
2.less文件
3.stylus文件
1.12.解析图片
解析图片需要用到file-loader,它的作用是将图片拷贝到打包后到输出目录,并且返回一个可以引用的地址
安装file-loader
npm i file-loader@4.2.0 -D
增加图片支持配置
webpack.base.js
{
test: /\.(jpe?g|png|gif|bmp)$/,
use: "file-loader"
}
当图片比较小的时候,我希望把这个图片转成base64格式的字符串,这样的好处是少发http请求,完成这个转base64字符串需求需要用到url-loader, url-loader是在file-loader上做的一层封装, 我们需要将这个loader先安装上
npm i url-loader@2.1.0 -D
修改相关配置
{
test: /\.(jpe?g|png|gif|bmp|svg)$/,
use: {
loader: "url-loader",
options: {
// 8k以下的图片转成base64
limit: 8192,
name: "img/[name].[ext]"
}
}
}
如果要支持字体图标,可以再新建一条匹配规则,使用file-loader来处理即可
相关配置
{
test: /\.(eof|ttf|woff|woff2)$/,
use: "file-loader"
}
1.11.解析js文件
ES的一些比较新的语法浏览器是不支持的,因此,我们需要将这些新的语法转成比较通用的语法,babel就是一个很好的转换工具,我们先安装需要的工具
npm i @babel/core@7.6.2 babel-loader@8.0.6 @babel/preset-env@7.6.2 -D
@babel/core是babel的核心,它转换语法的时候会用到 @babel/preset-env这个插件包, @babel/preset-env这些插件包里包含了各种新语法的转换功能,babel这个工具是可以独立运行的,如果想要和webpack结合,还需要安装一个babel-loader, babel-loader的作用就是把ES的一些新语法送到@babel/core,@babel/core再去调用@babel/preset-env插件来完成转换
增加配置
{
test: /\.js$/,
use: "babel-loader"
}
babel-loader 会去调一个babel的配置文件,我们需要在项目根目录下创建.babelrc的配置文件
{
"presets": ["@babel/preset-env"]
}
如果使用了一些@babel/preset-env不能转换的语法,你还可以单独安装对应的转换插件来解决,例如:
class Person {
name = "小红"
}
这种语法需要用 @babel/plugin-proposal-class-properties 这个插件来转换 安装插件
npm i @babel/plugin-proposal-class-properties@7.5.5 -D
螺钉课堂视频课程地址:http://edu.nodeing.com
webpack入门进阶(3)的更多相关文章
- webpack入门进阶(2)
1.4.webpack-dev-server webpack-dev-server是我们在开发阶段需要用到的一个服务器,它会把代码打包到内存,我们可以通过http的方式访问到打包到内存的代码 安装 n ...
- webpack入门进阶(1)
1.webpack应用实例 1.1.快速上手 初始化项目 mkdir webpack-demo cd webpack-demo npm init -y 安装webpack npm i webpack@ ...
- webpack入门教程之Hello webpack(一)
webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...
- webpack入门——webpack的安装与使用
一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...
- 一小时包教会 —— webpack 入门指南
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
- Webpack 入门指南 - 3. Hello, Angular2!
Webpack 入门指南 - 1.安装 Webpack 入门指南 - 2.模块 这一次,我们使用 Webpack 来打包 Angular 2 的应用. 与官方的 Hello, Angular 2 项目 ...
- Webpack 入门指南 - 2.模块
这一次我们谈谈模块问题. 通常我们希望这个项目可以分为多个独立的模块,比如,上一次提高的 hello 函数,如果我们定义为一个模块,其它模块引用之后,直接调用就好了.在前端怎么使用模块呢?这可说来话长 ...
- Webpack 入门指南 - 1.安装
Webpack 是目前流行的打包工具,如何安装它呢? 1. 安装 Node Js 首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统 ...
- webpack入门和实战(一):webpack配置及技巧
一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...
随机推荐
- 【Mybatis plus 3.2】怎么操作?看看我!(update、limit、between)
必须是springboot工程 在pom.xml中添加 <dependency> <groupId>com.baomidou</groupId> <artif ...
- Java IO实现文件(及文件夹)的复制 原创代码【精】
单个文件复制 FileInputStream input=new FileInputStream("C://360//fay.jpg"); FileOutputStream out ...
- java实现第三届蓝桥杯填算式
** 填算式** [结果填空] (满分11分) 看这个算式: ☆☆☆ + ☆☆☆ = ☆☆☆ 如果每个五角星代表 1 ~ 9 的不同的数字. 这个算式有多少种可能的正确填写方法? 173 + 286 ...
- linux基础相关命令
请参照以下文章 shell常用命令:https://www.cnblogs.com/pengtangtang/articles/PengTangTang_linux_base_one.html 通配符 ...
- Redis之分布式锁实现
点赞再看,养成习惯,微信搜索[三太子敖丙]关注这个互联网苟且偷生的工具人. 本文 GitHub https://github.com/JavaFamily 已收录,有一线大厂面试完整考点.资料以及我的 ...
- 第一章01-正常情况下Activity的生命周期
一.Android下能见到的界面 Window Dialog Toast Activity 二.Activity的生命周期分析 典型情况下的生命周期 是指在有用户参与的情况下,Activity所经过 ...
- 你都这么拼了,面试官TM怎么还是无动于衷?
前言 面试,对于每个人而然并不陌生,可以说是必须经历的一个过程了,小到一场考试,大到企业面试,甚至大型选秀...... 有时自己明明很努力了,但偏偏会在面试环节出了插曲,比如,紧张就是最容易出现的了. ...
- 00-04.kaliLinux-手动配置IP地址
在KaliLinux中手动配置网卡 用vim打开网卡的配置文件,配置各个网卡信息 root@kali:~# cd /etc/network root@kali:/etc/network# ------ ...
- ubuntu安装qt步骤(源码)
1.安装gcc,g++ sudo apt-get install gcc sudo apt-get install g++ 2.解压源码包 tar xvzf qt-xxxx 3.安装xlib库 sud ...
- Maven 在Mac下的配置
1.下载maven 解压到本地目录 官网下载Maven安装文件,如apache-maven-3.2.3-bin.tar.gz,然后解压到本地目录 解压: tar -zxcf apache-maven- ...