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

àì夳堔傛蜴生んèń 2022-04-18 06:09 267阅读 0赞

# loader介绍 #

`webpack`本身不支持`css`,`less`,`sass`,`js`,`image`等相关资源的打包工作，它仅仅提供了一个基础的框架，在这个框架上借助于相关的`loader`才可以实现`css`,`less`,`sass`,`js`,`image`等相关资源的打包工作。

# package.json #

## package.json特点 ##

`package.json`是`Node.js`的包管理文件，其在其中起到的作用类似于`pom.xml`在`Maven`中起到的作用。

`package.json`中记录的主要信息为项目的配置信息（比如名称、版本、许可证等数据源）以及项目的各种依赖包管理模块信息。

与`Maven`类似，在`Maven`项目中，每个项目的根目录中都有一个`pom.xml`，而同样的`package.json`也同样存在于每个`Node.js`项目的根目录中。

`package.json`由`npm init`命令行指令自动生成，由`npm install 模块名 --save-dev`将所依赖的模块打入`package.json`中。

当项目执行`npm i`（等价于`npm install`）时，其会依据`package.json`中的项目依赖模块信息自动的去`Node.js`仓库中下载所需依赖，同时在项目的根目录中生成一个`node-modules`项目`Node.js`依赖模块仓库，而我们所下载的`Node.js`依赖模块就存放在该本地仓库中。

## package.json注意事项 ##

### 不要对node-modules仓库打压缩包 ###

最后需要特别指出的是，在打项目压缩包时，千万不要将`node-modules`依赖仓库打入压缩包中，否则后果是惨痛的！

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

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

如上面所示，上面的打包时间耗时将近1小时（实际1小时还不止），这还不算完，其占用的磁盘空间也是大的惊人，上面显示其压缩包压缩前是3.4G，压缩后的大小为996.2MB，也就是说，正因为如此，其庞大的体积一下子让我的C盘与E盘爆满了！

虽然说打包时间漫长，打的压缩包也是体积庞大，然而其`node-modules`实际文件夹的大小也不过只有100MB左右。可以说`node-modules`是典型的压缩包比实际文件夹内容所占空间大得多的存在，也就是说，压缩包其实是越打越大了。

之所以出现这种情况，其还是由于其快捷方式所带来的影响，由于压缩包在压缩时会将快捷方式所指向的源文件也一起打包进来，因而快捷方式所链接资源的大小直接影响到压缩包体积的大小，而`Node.js`正是依靠快捷方式进行模块依赖与循环依赖管理的，也就是说，在打压缩包时，其就不可避免的很多通用的文件被多次重复性的打包，其最终的结果就是压缩包本来应该是越压缩，体积越小的，但是这个却恰恰相反，反倒是越打压缩包体积越迅速庞大。

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

虽然说将`node-modules`模块可以打成压缩包，不过这还是在`node-modules`模块内所存在的依赖比较少的情况下才可行，如果要是依赖的内容比较多，更多的情况是打压缩包失败。因为压缩文件会在打压缩包之前，会检索文件，并将其存储起来，而其存储的文件数是存在一个上限的，当文件数过多，超过这一上限时，由于压缩软件无法对剩余的文件进行扫描检索，因而最终注定会失败，比如说我在使用好压压缩软件进行压缩时，当`node-modules`内存在的依赖模块过多时就出现了打包失败的情况。

所以说，在这里，切记，不可对`node-modules`仓库打压缩包。

### 配置IDE不扫描node\_modules文件夹 ###

由于`node-modules`仓库内文件众多，这样会导致`IDE`在扫描`node-modules`文件夹时会检索其语法等信息，而这也是导致`IDE`异常巨卡的主要原因，所以说一般我们会在IDE中进行相应配置，使其不再扫描`node-modules`仓库，这样可以大幅加快项目的加载与编译速度。

配置IDE不扫描`node-modules`仓库的方法如下：

*  [解决WebStorm使用Vue-webpack卡顿问题][WebStorm_Vue-webpack]

## 生成package.json ##

将控制台中的光标切换到项目根目录中，执行下面代码生成`package.json`文件。

npm init

上面命令行在执行时需要我们输入包名、版本号、等信息，这里我直接将包名命名为`csspackage`，后面的直接回车，直至最终生成`package.json`文件。

此时生成的`package.json`文件内容为：

由于我们的`loader`需要使用`css-loader`和`style-loader`共同来处理`css`资源的打包工作，所以在使用前必须在项目中安装这两个包。

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

当运行了上面的那条命令后，我们的`package.json`文件源码变为：

在这里，我们明显可以看到`css-loader`和`style-loader`的依赖包被打入了`package.json`的`devDependencies`中。而在控制台中执行的命令行中的`--save`就是执行上述操作的指令。

# 添加项目css样式 #

## 源码在上一篇文章基础上进行修改 ##

这里的代码是在上一篇的基础上所做的修改，所以说此处的绝大部分代码与上一篇文章中的相同。上一篇文章如下：

*  [webpack中webpack.config.js的使用][webpack_webpack.config.js]

## 现在的项目结构 ##

现在的目录结构为：

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

## 源码修改 ##

### webpack.config.js ###

由于现在项目的在`package.json`中添加了`css-loader`和`style-loader`模块，而我们要想使用这两个模块，那么我们得告知`webpack`才行，也就是说需要在`webpack.config.js`中添加对上述两模块的引用才行，其方式如下，就是在`webpack.config.js`中添加下述代码：

,module:{
            loaders:[
                {
                    test:/\.css$/
                    ,loader:'style-loader!css-loader'
                }
            ]
        }

其中`module`是项目依赖模块关键字，而`loaders`关键字则是要告知`webpack`的信息，其中的`test`后面跟的是正则表达式，其用来匹配所要打包的资源文件的后缀，而`loader`关键字则是要告知`loader`接下来该使用哪些依赖模块。

### main.js ###

我们之前说过，webpack打包的入口文件为`main.js`，因而我们需要在这里添加所要引入的`site.css`入口文件信息，即添加下述代码：

require('../assets/css/site.css');

### site.css ###

#v1{
        border:1px solid red;
    }

# 示例 #

## 完整源码 ##

`site.css`源码：

#v1{
        border:1px solid red;
    }

`calc.js`源码：

//1、定义add函数
    function add(x,y){
        return x + y;
    }
    
    //2、导出add函数
    module.exports = add;

`main.js`源码：

//1、获取dom对象
    var v1 = document.querySelector('#v1');
    var v2 = document.querySelector('#v2');
    var bt = document.querySelector('#bt');
    var res = document.querySelector('#res');
    
    require('../assets/css/site.css');
    
    //2、获取calc.js中的add方法并且调用计算结果
    bt.onclick = function () {
        //获取输入数值并将其转换成浮点型数据
        var val1 = parseFloat(v1.value);
        var val2 = parseFloat(v2.value);
    
        //引入calc.js模块
        var add  = require('./calc');
        //调用其中的add方法，实现计算功能
        res.value = add(val1,val2);
    };

`index.html`源码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>webpack</title>
    </head>
    <body>
        <input type="text" id="v1"> +
        <input type="text" id="v2">
        <input type="button" id="bt" value="=">
        <input type="text" id="res">
    </body>
    <script src="dist/build.js"></script>
    </html>

`package.json`源码：

{
          "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",
            "style-loader": "^0.23.1"
          }
        }
    
      `webpack.config.js`源码：
    
    module.exports = {
        entry:'./src/main'   //指定打包的入口文件
        ,output:{
            path:__dirname +  '/dist'
            ,filename:'build.js'
        }
        ,module:{
            loaders:[
                {
                    test:/\.css$/
                    ,loader:'style-loader!css-loader'
                }
            ]
        }
    };

## 运行结果 ##

当准备充足上面的源码后，将控制台中的光标定位于项目根目录中，运行下述代码即可在浏览器中查看相应的结果。

cnpm i
    webpack

浏览器访问结果如下：

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

## 分析 ##

从上面的结果中我们可以看到，我们在`css`中所添加的样式已经成功的在浏览器的页面中显示了出来，这说明我们通过`package.json`将`Node.js`模块加载到`node_modules`中；通过`webpack.config.js`匹配`.css`类型文件，并加载`css-loader`和`style-loader`模块整个流程是成功的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70]: /images/20220418/766ed7f6d4474acdad47f5c47999b956.png
[20181109143059462.png]: /images/20220418/ea2fee8dec6b4d5a9c60f1e983669e9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70 1]: /images/20220418/86fc85dd1d144425956d0144def738cc.png
[WebStorm_Vue-webpack]: https://blog.csdn.net/ZZY1078689276/article/details/83211806
[webpack_webpack.config.js]: https://blog.csdn.net/ZZY1078689276/article/details/83893891
[20181109153926594.png]: /images/20220418/85c151ca0e164ddd9faa4592677a9ab5.png
[20181109155632774.png]: /images/20220418/7d72a60463814f3abfde76ef6f57968b.png