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 13 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 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
供参考的 php 学习提高路线分享
2011/10/23 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
php中上传文件的的解决方案
2018/09/25 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
python打印异常信息的两种实现方式
2019/12/24 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
大学军训通讯稿
2014/01/13 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
Python基于百度AI实现抓取表情包
2021/06/27 Python