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).图片等都 ...
随机推荐
- 【图机器学习】cs224w Lecture 15 - 网络演变
目录 Macroscopic Forest Fire Model Microscopic Temporal Network Temporal PageRank Mesoscopic 转自本人:http ...
- ActiveMQ 笔记(四)Spring\SpringBoot 整合 Activemq
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.Spring 整合Activemq 1.所需jar包 <dependencies> &l ...
- Java实现 蓝桥杯VIP 算法训练 奇偶判断
问题描述 能被2整除的数称为偶数,不能被2整除的数称为奇数.给一个整数x,判断x是奇数还是偶数. 输入格式 输入包括一个整数x,0<=x<=100000000. 输出格式 如果x是奇数,则 ...
- Java实现 LeetCode 260 只出现一次的数字 III(三)
260. 只出现一次的数字 III 给定一个整数数组 nums,其中恰好有两个元素只出现一次,其余所有元素均出现两次. 找出只出现一次的那两个元素. 示例 : 输入: [1,2,1,3,2,5] 输出 ...
- Java实现 LeetCode 225 用队列实现栈
225. 用队列实现栈 使用队列实现栈的下列操作: push(x) – 元素 x 入栈 pop() – 移除栈顶元素 top() – 获取栈顶元素 empty() – 返回栈是否为空 注意: 你只能使 ...
- Java实现最近点问题
**问题描述:** 给定某空间中(直线空间或平面空间)n个点,请找出它们中的最近点对.你需要完成下列任务: 1.随机产生或手工输入n个点的坐标. 2.输出最近的两个点的坐标. 3.算法尽可能效率高. ...
- Java实现LeetCode #986 - Interval List Intersections
class Solution { public: vector<Interval> intervalIntersection(vector<Interval>& A, ...
- Java实现DFS深度优先查找
1 问题描述 深度优先查找(depth-first search,DFS)可以从任意顶点开始访问图的顶点,然后把该顶点标记为已访问.在每次迭代的时候,该算法紧接着处理与当前顶点邻接的未访问顶点.这个过 ...
- java实现排列为平方数
** 排列为平方数** 若干不同的数字,排列组合后能产生多少个平方数? 下面的代码解决了这个问题. 对于:1,6,9 排列后,可产生3个平方数: 169 196 961 请阅读下面的代码,填写缺失的部 ...
- akka-typed(4) - EventSourcedBehavior in action
前面提到过,akka-typed中较重要的改变是加入了EventSourcedBehavior.也就是说增加了一种专门负责EventSource模式的actor, 最终和其它种类的actor一道可以完 ...