动手写webpack配置--8.loaders加载器的使用

基于Webpack4.x + npm6.5 + node v10.10.0 +react+ vscode环境.

项目名webpackDemo；

上一节描述了hash值的使用:https://blog.csdn.net/fengsh998/article/details/88087545

本节学习下loaders:官网:https://www.webpackjs.com/loaders/

loader能干嘛，引用官网的描述

loaders
webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。

loader 通过在 require() 语句中使用 loadername! 前缀来激活，或者通过 webpack 配置中的正则表达式来自动应用 - 查看配置。

总之，感觉上就是无所不能。

学习几个常见的资源loaders

css-loader: https://www.webpackjs.com/loaders/css-loader/

styte-loader: https://www.webpackjs.com/loaders/style-loader/

url-loader: https://www.webpackjs.com/loaders/url-loader/

file-loader:https://www.webpackjs.com/loaders/file-loader/

css-loader用来加载.css

css-loader 解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们。
引用资源通常使用合适 loader 是 file-loader和 url-loader。

styte-loader用来将css-loader的样式插入到html中。注意一点，webpack是自下而上解析的。所以style-loader一定要放在css-loader之前。

如果css-loader写在了style-loader之前，可能会出现下面的ERROR

ERROR in ./src/App.css
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(2:1) Unknown word

  1 | 
> 2 | var content = require("!!./App.css");
    | ^
  3 | 
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

 

 

修改webpack.config.js

...

module.exports = {
    ...
    module: {
        rules: [
        ...
        {
            test: /\.(css)$/,
            use: [
                {
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true
                    }
                }
            ]
        }
        ]
    }
    ...
}

在App.js相同的目录新建一个App.css用来为js组件处理相应的样式。

App.css

.container{
    /* background: #00f; */
    font-size: 2rem;
    color:#00ff00;
}

效果：

增加一个assets文件夹，

增加两个图片。

修改App.css增中一个图片url

.container{
    /* background: #00f; */
    font-size: 2rem;
    color:#00ff00;
    background: url('../assets/bg_1px.jpg')
}

发现提示这个jpg识别不了。因为我们css里使用了url()，可以使用options中的url:false来禁用css-loader对url的解析。

...
                {
                    loader: 'css-loader',
                    options: {
                        url: false,
                        sourceMap: true,
                    }
                }
...

禁用后再次运行。可以看到能跑起来，但设置的背景没有效果。查看console发现加载 404了。

那怎么办呢？我们知道url()可以直接外部资源加载，也可在CSS中作为base64图片流。我前面故意找了两张图，一张大于10k一张小于10k.目的就是想看下加载资源时以何种形式。

同样把webpack.config.js修改为

...

module.exports = {
    ...
    module: {
        rules: [
        ...
        {
            test: /\.(css)$/,
            use: [
                {
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader',
                    options: {
                        url: true,       /*记得把这个url设置为true*/
                        sourceMap: true,
                    }
                }
            ]
        },
        {
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            loader: 'url-loader',
            options: {
                limit: 10000
            }
        }
        ]
    },
    ...
}

使用url-loader进行加载url()引用的外部资源。其中options 中指定了大小为10k.

可以看到上图中右边的background 的url中已经被转化为base64流的方式引用。这样如果图片较小的情况下，使用这个方式可以减少http下载对服务器造成的压力。

现在换成大图试试

.container{
    /* background: #00f; */
    font-size: 2rem;
    color:#00ff00;
    background: url('../assets/bg_img.jpg')
}

bg_1px.jpg为1像素。

而bg_img.jpg 为39K的一个背图。

重新打包发现报错了。

这是因为大文件外部资源，需要file-loader.这就是为啥前面有提到，但一直没有用。现在才现身。

可以看到成功加载背景图了。

具体的细节 options，请各自参看api。慢慢学啦。我也是边学边做吧。如果发面有错的地方也请指正啦。