Webpack中装入器打包各种文件的方法实例

　　

　　

使用webpack时,在main.js文件中直接使用如下代码导入了风格。css文件,控制台中显示如下错误:你可能需要一个适当的加载程序来处理这个文件类型,目前没有加载器配置为处理这些文件。
　　

　　 　　 　　进口的。/css/style.css; 　　 　　

原因是,webpack中默认只能打包js类型文件,无法打包其他类型文件。如果要打包非。js类型文件,需要手动安装一些第三方装载机加载器。
　　

　　

以下为各种文件类型打包实例:
　　

　　


　　

　　

方式一 　　

在项目中用npm命令本地安装style-loader和css-loader两个包

　　 　　 　　npm安装style-loader css-loader——保存——dev 　　 　　

在引用风格。css文件时,将进口的。/css/style.css;代码改为以下代码:

　　 　　 　　进口style-loader css-loader !。/style.css”)”;//先经过css-loader和style-loader处理 　　 　　

重新用webpack打包

　　 　　 　　npm运行dev 　　 　　

这种方式的缺点是,当需要引入多个css文件,每次引入时都需要加style-loader ! css-loader !,比较麻烦,因此推荐使用以下方式:
　　

　　

<强>方式二

　　

在项目中用npm命令本地安装style-loader和css-loader两个包

　　 　　 　　npm安装style-loader css-loader——保存——dev 　　 　　

打开webpack.config.js文件,在里面新增一个配置节点模块,在模块对象中,有一个规则属性,它是一个数组,里面存放了所有第三方文件匹配和处理规则。如下代码匹配处理css文件:

　　 　　 　　模块:{//配置所有第三方装载机模块 　　规则:[//第三方模块的匹配规则 　　{测试:/\。css/美元,使用:[' style-loader ', ' css-loader ']},//处理css文件的加载程序 　　] 　　} 　　 　　

此处‘style-loader’和‘css-loader顺序不可替换。因为使用中处理顺序为从后往前,先用css-loader对css文件进行处理,将处理后的结果交给style-loader作进一步处理,处理为webpack可以进行打包的数据。

　　

引入style.css文件

　　 　　 　　进口的。/css/style.css; 　　 　　

重新用webpack打包

　　 　　 　　npm运行dev 　　 　　

以下所有其他类型文件的打包同方式二
　　

　　

　　

在项目中用npm命令本地安装style-loader和css-loader和less-loader和少三个包(若已有style-loader和css-loader则不必再安装这两个)

　　 　　 　　npm安装style-loader css-loader less-loader少——保存——dev 　　 　　

打开webpack.config.js文件,在节点模块中规则属性数组中,新增如下少的规则:

　　 　　 　　{测试:/\。美元/更少,使用:[‘style-loader’,‘css-loader’,‘less-loader]}//处理少文件的装载机 　　 　　

引入style.less文件

　　 　　 　　进口的。/css/style.less; 　　 　　

重新用webpack打包

　　 　　 　　npm运行dev 　　 　　

　　

在项目中用npm命令本地安装style-loader和css-loader和sass-loader和node-sass四个包(若已有style-loader和css-loader则不必再安装这两个)

　　 　　 　　npm安装style-loader css-loader sass-loader node-sass——保存——dev 　　 　　

打开webpack.config.js文件,在节点模块中规则属性数组中,新增如下scss的规则:

　　 　　 　　{测试:/\。scss/美元,使用:[‘style-loader’,‘css-loader’,‘sass-loader]}//处理少文件的装载机 　　 　　

引入style.scss文件

　　 　　 　　进口的。/css/style.lcss; 　　 　　

重新用webpack打包

　　 　　 　　npm运行dev 　　 　　


　　

　　

例如,在css样式中使用背景图片:url (“…”), webpack默认无法处理url,因此也需要手动安装第三方装载机

　　

在项目中用npm命令本地安装url-loader和file-loader两个包

　　 　　 　　npm安装url-loader file-loader——保存——dev 　　 　　

打开webpack.config.js文件,在节点模块中规则属性数组中,新增如下的规则:

　　 　　 　　{测试:/\。jpg | png | gif | bmp | jpeg)/美元,使用:“url-loader”},//处理图片路径的加载程序 　　{测试:/\。(ttf |测试结束| svg woff | | woff2)/美元,使用:“url-loader”},//处理字体文件的装载机

Webpack中装入器打包各种文件的方法实例