Webpack中loader打包各种文件的方法实例
前言
使用webpack时,在main.js文件中直接使用如下代码导入了style.css文件,控制台中显示如下错误:Youmayneedanappropriateloadertohandlethisfiletype,currentlynoloadersareconfiguredtoprocessthisfile.
import'./css/style.css';
原因是,webpack中默认只能打包.js类型文件,无法打包其他类型文件。如果要打包非.js类型文件,需要手动安装一些第三方loader加载器。
以下为各种文件类型打包实例:
处理css文件
方式一
在项目中用npm命令本地安装style-loader和css-loader两个包
npminstallstyle-loadercss-loader--save--dev
在引用style.css文件时,将import'./css/style.css';代码改为以下代码:
import'style-loader!css-loader!./style.css'")';//先经过css-loader和style-loader处理
重新用webpack打包
npmrundev
这种方式的缺点是,当需要引入多个css文件,每次引入时都需要加style-loader!css-loader!,比较麻烦,因此推荐使用以下方式:
方式二
在项目中用npm命令本地安装style-loader和css-loader两个包
npminstallstyle-loadercss-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打包
npmrundev
以下所有其他类型文件的打包同方式二
处理less文件
在项目中用npm命令本地安装style-loader和css-loader和less-loader和less三个包(若已有style-loader和css-loader则不必再安装这两个)
npminstallstyle-loadercss-loaderless-loaderless--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打包
npmrundev
处理scss文件
在项目中用npm命令本地安装style-loader和css-loader和sass-loader和node-sass四个包(若已有style-loader和css-loader则不必再安装这两个)
npminstallstyle-loadercss-loadersass-loadernode-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打包
npmrundev
处理url地址
例如,在css样式中使用background-image:url('...'),webpack默认无法处理url,因此也需要手动安装第三方loader
在项目中用npm命令本地安装url-loader和file-loader两个包
npminstallurl-loaderfile-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打包
npmrundev
处理ES6高级语法
webpack默认只能处理一部分的ES6语法,对于一些更高级的ES6语法,webpack无法处理,如下代码用webpack打包会报错。
classPerson{ staticinfo={name:'zlx',age:18} }; console.log(Person.info);
webpack需要借助于第三方的loader,这里使用Babel,将高级的ES6语法转为低级的语法之后,再将结果进行打包。
用npm命令安装如下包:
npmibabel-corebabel-loaderbabel-plugin-transform-runtime-D npmibabel-preset-envbabel-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打包
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对毛票票的支持。