Webpack中loader打包各种文件的方法实例


Posted in Javascript onSeptember 03, 2019

前言

使用webpack时,在main.js文件中直接使用如下代码导入了style.css文件,控制台中显示如下错误:You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

import './css/style.css';

原因是,webpack中默认只能打包.js类型文件,无法打包其他类型文件。如果要打包非.js类型文件,需要手动安装一些第三方loader加载器。

以下为各种文件类型打包实例:

处理css文件

方式一

在项目中用npm命令本地安装style-loader和css-loader两个包

npm install style-loader css-loader --save--dev

在引用style.css文件时,将import './css/style.css';代码改为以下代码:

import 'style-loader!css-loader!./style.css'")'; //先经过css-loader和style-loader处理

重新用webpack打包

npm run dev

这种方式的缺点是,当需要引入多个css文件,每次引入时都需要加style-loader!css-loader!,比较麻烦,因此推荐使用以下方式:

方式二

在项目中用npm命令本地安装style-loader和css-loader两个包

npm install style-loader css-loader --save--dev

打开webpack.config.js文件,在里面新增一个配置节点module,在module对象中,有一个rules属性,它是一个数组,里面存放了所有第三方文件匹配和处理规则。如下代码匹配处理css文件:

module: { // 配置所有第三方loader 模块
 rules: [ // 第三方模块的匹配规则
  { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader
 ]
 }

注意:此处'style-loader'和'css-loader'顺序不可替换。因为use中处理顺序为从后往前。先用css-loader对css文件进行处理,将处理后的结果交给style-loader作进一步处理,处理为webpack可以进行打包的数据。

引入style.css文件

import './css/style.css';

重新用webpack打包

npm run dev

以下所有其他类型文件的打包同方式二

处理less文件

在项目中用npm命令本地安装style-loader和css-loader和less-loader和less三个包(若已有style-loader和css-loader则不必再安装这两个)

npm install style-loader css-loader less-loader less --save--dev

打开webpack.config.js文件,在节点module中rules属性数组中,新增如下less的规则:

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } // 处理 less 文件的 loader

引入style.less文件

import './css/style.less';

重新用webpack打包

npm run dev

处理scss文件

在项目中用npm命令本地安装style-loader和css-loader和sass-loader和node-sass四个包(若已有style-loader和css-loader则不必再安装这两个)

npm install style-loader css-loader sass-loader node-sass --save--dev

打开webpack.config.js文件,在节点module中rules属性数组中,新增如下scss的规则:

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } // 处理 less 文件的 loader

引入style.scss文件

import './css/style.lcss';

重新用webpack打包

npm run dev

处理url地址

例如,在css样式中使用background-image:url('...'),webpack默认无法处理url,因此也需要手动安装第三方loader

在项目中用npm命令本地安装url-loader和file-loader两个包

npm install url-loader file-loader --save--dev

打开webpack.config.js文件,在节点module中rules属性数组中,新增如下的规则:

{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' }, // 处理 图片路径的 loader
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader

重新用webpack打包

npm run dev

处理ES6高级语法

webpack默认只能处理一部分的ES6语法,对于一些更高级的ES6语法,webpack无法处理,如下代码用webpack打包会报错。

class Person {
	static info = {name:'zlx',age:18}
};
console.log(Person.info);

webpack需要借助于第三方的 loader,这里使用Babel,将高级的ES6语法转为低级的语法之后,再将结果进行打包。

用npm命令安装如下包:

npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D

打开webpack.config.js文件,在节点module中rules属性数组中,新增如下的规则:

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // exclude是防止node_modules中的js文件被打包

在项目的 根目录中,新建一个 叫做 .babelrc  的Babel 配置文件,这个配置文件,属于JSON格式。里面写入如下代码:

{
 "presets": ["env", "stage-0"],
 "plugins": ["transform-runtime"]
}

重新用webpack打包

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 自动转到命名锚记
Jan 10 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
javascript封装简单实现方法
Aug 11 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 #Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 #jQuery
js tab栏切换代码实例解析
Sep 03 #Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 #Javascript
Node.js学习教程之Module模块
Sep 03 #Javascript
vue动态绘制四分之三圆环图效果
Sep 03 #Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 #Javascript
You might like
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
Angular的$http与$location
2016/12/26 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
javascript中的隐式调用
2018/02/10 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python基础教程之获取本机ip数据包示例
2014/02/10 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
Python中用于返回绝对值的abs()方法
2015/05/14 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
高中毕业自我鉴定
2013/12/16 职场文书
见习期自我鉴定
2014/01/31 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android