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 相关文章推荐
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
简单理解vue中Props属性
Oct 27 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 Javascript
解决vue-loader加载不上的问题
Oct 21 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 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
GD输出汉字的函数的分析
2006/10/09 PHP
php 更新数据库中断的解决方法
2009/06/05 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
表格 隔行换色升级版
2009/11/07 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
Python Queue模块详解
2014/11/30 Python
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
Python列表list操作相关知识小结
2020/01/29 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
《桥》教学反思
2014/04/09 职场文书
业务员自荐信范文
2014/04/20 职场文书
团日活动总结范文
2014/04/25 职场文书
授权收款委托书
2014/09/23 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
社区结对共建协议书
2016/03/23 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript