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)的更多相关文章

  1. webpack入门进阶(2)

    1.4.webpack-dev-server webpack-dev-server是我们在开发阶段需要用到的一个服务器,它会把代码打包到内存,我们可以通过http的方式访问到打包到内存的代码 安装 n ...

  2. webpack入门进阶(1)

    1.webpack应用实例 1.1.快速上手 初始化项目 mkdir webpack-demo cd webpack-demo npm init -y 安装webpack npm i webpack@ ...

  3. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  4. webpack入门——webpack的安装与使用

    一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...

  5. 一小时包教会 —— webpack 入门指南

    什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...

  6. Webpack 入门指南 - 3. Hello, Angular2!

    Webpack 入门指南 - 1.安装 Webpack 入门指南 - 2.模块 这一次,我们使用 Webpack 来打包 Angular 2 的应用. 与官方的 Hello, Angular 2 项目 ...

  7. Webpack 入门指南 - 2.模块

    这一次我们谈谈模块问题. 通常我们希望这个项目可以分为多个独立的模块,比如,上一次提高的 hello 函数,如果我们定义为一个模块,其它模块引用之后,直接调用就好了.在前端怎么使用模块呢?这可说来话长 ...

  8. Webpack 入门指南 - 1.安装

    Webpack 是目前流行的打包工具,如何安装它呢? 1. 安装 Node Js 首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统 ...

  9. webpack入门和实战(一):webpack配置及技巧

    一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...

随机推荐

  1. 【图机器学习】cs224w Lecture 15 - 网络演变

    目录 Macroscopic Forest Fire Model Microscopic Temporal Network Temporal PageRank Mesoscopic 转自本人:http ...

  2. ActiveMQ 笔记(四)Spring\SpringBoot 整合 Activemq

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.Spring 整合Activemq 1.所需jar包 <dependencies> &l ...

  3. Java实现 蓝桥杯VIP 算法训练 奇偶判断

    问题描述 能被2整除的数称为偶数,不能被2整除的数称为奇数.给一个整数x,判断x是奇数还是偶数. 输入格式 输入包括一个整数x,0<=x<=100000000. 输出格式 如果x是奇数,则 ...

  4. Java实现 LeetCode 260 只出现一次的数字 III(三)

    260. 只出现一次的数字 III 给定一个整数数组 nums,其中恰好有两个元素只出现一次,其余所有元素均出现两次. 找出只出现一次的那两个元素. 示例 : 输入: [1,2,1,3,2,5] 输出 ...

  5. Java实现 LeetCode 225 用队列实现栈

    225. 用队列实现栈 使用队列实现栈的下列操作: push(x) – 元素 x 入栈 pop() – 移除栈顶元素 top() – 获取栈顶元素 empty() – 返回栈是否为空 注意: 你只能使 ...

  6. Java实现最近点问题

    **问题描述:** 给定某空间中(直线空间或平面空间)n个点,请找出它们中的最近点对.你需要完成下列任务: 1.随机产生或手工输入n个点的坐标. 2.输出最近的两个点的坐标. 3.算法尽可能效率高. ...

  7. Java实现LeetCode #986 - Interval List Intersections

    class Solution { public: vector<Interval> intervalIntersection(vector<Interval>& A, ...

  8. Java实现DFS深度优先查找

    1 问题描述 深度优先查找(depth-first search,DFS)可以从任意顶点开始访问图的顶点,然后把该顶点标记为已访问.在每次迭代的时候,该算法紧接着处理与当前顶点邻接的未访问顶点.这个过 ...

  9. java实现排列为平方数

    ** 排列为平方数** 若干不同的数字,排列组合后能产生多少个平方数? 下面的代码解决了这个问题. 对于:1,6,9 排列后,可产生3个平方数: 169 196 961 请阅读下面的代码,填写缺失的部 ...

  10. akka-typed(4) - EventSourcedBehavior in action

    前面提到过,akka-typed中较重要的改变是加入了EventSourcedBehavior.也就是说增加了一种专门负责EventSource模式的actor, 最终和其它种类的actor一道可以完 ...