利用webpack打包其它资源文件

r囧r小猫 2022-04-18 06:31 379阅读 0赞

文章目录

打包sass文件
- 项目结构
- 修改源码
- 运行结果
打包less文件
- 修改源码
- 运行结果
打包url中的资源
- 修改源码
- 运行结果

webpack除了能够打包css资源文件外，其还可以打包众多的其它类型的文件。

这里为了减少重复代码的编写，所以说此处是在上一篇文章中代码的基础上所做的修改，上一篇文章的地址如下：

利用webpack中的loader来打包css文件

打包sass文件

webpack中使用sass-loader,css-loader,style-loader来处理.scss文件的打包工作。而其中的sass-loader又依赖于node-sass，所以说我们还要添加node-sass依赖。

项目结构

在这里插入图片描述

修改源码

site1.scss文件

在css文件夹中添加site1.scss文件，其源码如下：

$color:blue;
#v2{
    border:1px solid $color;
}

main.js文件

在main.js文件文件中添加site1.scss资源文件的引入。

require('../assets/css/site1.scss');

webpack.config.js文件

在webpack.config.js文件中的loaders关键字下添加下面代码：

,{
    test:/\.scss$/
     ,loader:'style-loader!css-loader!sass-loader'
 }

package.json文件

将控制台的光标定位于项目根目录，在其中输入下述指令，将其中的依赖添加到package.json文件中。

cnpm i node-sass sass-loader css-loader style-loader --save-dev

运行结果

在控制台中输入下述指令，打开浏览器，即能访问打包后的结果。

在这里插入图片描述

如上图所示，第二个文本框成功的变成了蓝色，这说明我们的sass打包正确。

打包less文件

webpack打包less文件所需要的依赖包为css-loader、style-loader、less-loader，其中less为less-loader所需要的依赖包。

修改源码

site2.less文件：

在site2.less中添加如下源码，同时将所有文本框的边框宽度变为2px

@color:green;
#res{
    border:2px solid @color;
}

main.js文件：

在main.js中添加源码：

require('../assets/css/site2.less');

webpack.config.js文件：

在webpack.config.js中的loaders关键字下添加源码：

,{
      test:/\.less/                    //打包.less文件
      ,loader:'style-loader!css-loader!sass-loader!less-loader'
  }

package.json文件

将控制台的光标定位于项目根目录下，执行下面指令将css-loader、style-loader、less-loader以及less依赖包打入到package.json文件中。

cnpm i less less-loader style-loader css-loader --save-dev

运行结果

在控制台中执行下列命令：

cnpm i
webpack

其展示结果为：

在这里插入图片描述

打包url中的资源

webpack打包url网络资源所需要的依赖包为url-loader、file-loader。

修改源码

site.css源码：

在该文件中添加下述代码，同时在相应目录中添加图片文件。

#bg{
    width: 200px;
    height: 200px;
    background-image: url("../imgs/png/e6.png");
}

index.html源码：

在该文件中添加下述代码：

<hr>
<div id="bg"></div>

package.json源码：

将控制台中的光标定位于项目根目录中，执行下述命令行指令将url-loader、file-loader添加到package.json中

npm i url-loader file-loader --save-dev

由于依赖包版本的不一致性，这导致有的版本的依赖包不能够正常运行，所以在这里更新一下完整源码：

{
  "name": "csspackage",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^1.0.1",
    "file-loader": "^0.11.1",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^0.5.8"
  }
}

webpack.config.js源码：

在该文件的loaders关键字下添加下述代码：

,{
     test:/\.(png|jpg|gif|ttf)$/           //打包url请求的资源文件
     ,loader:'url-loader?limit=20000'     //limit表示图片的大小为40k是临界值，小于20k的图片均被
     // 打包到build.js中去，此时图片的显示就会很快，这是一个优化操作。
 }