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实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
解析PHP提交后跳转
2013/06/23 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
node文件批量重命名的方法示例
2017/10/23 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
python根据出生日期获得年龄的方法
2015/03/31 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
python利用有道翻译实现"语言翻译器"的功能实例
2017/11/14 Python
Python随机函数random()使用方法小结
2018/04/29 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
大学生毕业自我鉴定范文
2013/11/03 职场文书
竞聘上岗演讲稿范文
2014/01/10 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
专家推荐信怎么写
2015/03/25 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android