Webpack中loader打包各种文件的方法实例(loader,webpack,打包,web开发)

前言

方式一

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

在引用style.css文件时，将import './css/style.css';代码改为以下代码：

重新用webpack打包

方式二

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

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

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

引入style.css文件

重新用webpack打包

处理less文件

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

打开webpack.config.js文件，在节点module中rules属性数组中，新增如下less的规则：

引入style.less文件

重新用webpack打包

处理scss文件

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

打开webpack.config.js文件，在节点module中rules属性数组中，新增如下scss的规则：

引入style.scss文件

重新用webpack打包

例如，在css样式中使用background-image:url('...')，webpack默认无法处理url，因此也需要手动安装第三方loader

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

打开webpack.config.js文件，在节点module中rules属性数组中，新增如下的规则：

重新用webpack打包

webpack需要借助于第三方的 loader，这里使用Babel，将高级的ES6语法转为低级的语法之后，再将结果进行打包。

用npm命令安装如下包：

打开webpack.config.js文件，在节点module中rules属性数组中，新增如下的规则：

在项目的 根目录中，新建一个 叫做 .babelrc 的Babel 配置文件，这个配置文件，属于JSON格式。里面写入如下代码：

重新用webpack打包

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。