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 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
JQuery 文本框使用小结
May 22 Javascript
jQuery find和children方法使用
Jan 31 Javascript
javascript加号"+"的二义性说明
Mar 04 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
vue debug 二种方法
Sep 16 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 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 empty() 检查一个变量是否为空
2011/11/10 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
基于php实现的验证码小程序
2016/12/13 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
javascript 操作文件 实现方法小结
2009/07/02 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
python time模块用法实例详解
2014/09/11 Python
python读取word文档的方法
2015/05/09 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
使用pip安装python库的多种方式
2019/07/31 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
电子狗项圈:eDog Australia
2019/12/04 全球购物
幼儿园英语教学反思
2014/01/30 职场文书
网站推广策划方案
2014/06/04 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL