利用webpack打包其它资源文件

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

### 文章目录 ###

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

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

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

*  [利用webpack中的loader来打包css文件][webpack_loader_css]

# 打包sass文件 #

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

## 项目结构 ##

![在这里插入图片描述][20181109173617680.png]

## 修改源码 ##

`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

## 运行结果 ##

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

![在这里插入图片描述][20181109173314143.png]

如上图所示，第二个文本框成功的变成了蓝色，这说明我们的`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

其展示结果为：

![在这里插入图片描述][20181109180429919.png]

# 打包url中的资源 #

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

## 修改源码 ##

`site.css`源码：

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

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

`index.html`源码：

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

`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中去，此时图片的显示就会很快，这是一个优化操作。
     }

## 运行结果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70]

由上图可知，我们打包的`url`图片资源已经可以正常显示了，由于该图片资源小于20k，因而其图片资源被以`base64`位字节码的形式打到了`build.js`中，其可以加快图片在页面的展示速度。

[webpack_loader_css]: https://blog.csdn.net/ZZY1078689276/article/details/83896782
[20181109173617680.png]: /images/20220418/eb09471378964a93943ac422b303507e.png
[20181109173314143.png]: /images/20220418/b9be8be9b0724b62a2c3e45269d56dfc.png
[20181109180429919.png]: /images/20220418/c1e72624f412440593d0029e888de0ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70]: /images/20220418/fc0e03ec06d54f089c3b06761a8cdfc1.png