Webpack loader

本节介绍Webpack loader并进行简单使用讲解。

一、Webpack loader简介

Loader是Webpack生态里一个重要的组成,我们一般称之为预处理器。

Webpack在进行打包的时候,对所有引入的资源文件,都当作模块来处理。

但Webpack自身只支持对JS文件处理(现在的版本也支持对JSON文件处理),如果你引入了一个CSS文件或图片文件,那么Webpack在处理该模块的时候,会在控制台报错:Module parse failed…You may need an appropriate loader to handle this file type.

控制台告诉你模块解析失败,你需要你个合适的loader来处理该文件类型。

当Webpack自身无法处理某种类型的文件的时候,我们就可以通过配置特定的loader,赋予Webpack来处理该类型文件的能力。

二、Webpack loader使用

我们来看一个例子。

配套代码是github仓库 https://github.com/jruit/webpack-tutorial 的webpack1-3例子

新建项目文件夹名是webpack1-3,然后执行下面的命令初始化项目

  npm init -y

新建相应的文件,目录结构如下。

|--a.js
|--b.css
|--index.html
|--package.json
|--webpack.config.js

b.css声明了.hello类,该类的文字颜色是蓝色;

a.js引入了b.css;

webpack.config.js是Webpack的配置文件,从a.js入口打包,输出bundle.js文件;

index.html引入了打包后的bundle.js文件,并且有一个clss为hello,内容是Hello, Loader的div。

a.js

  import './b.css'

b.css

  .hello {
    margin: 30px;
    color: blue;
  }

index.html

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <script src="bundle.js"></script>
  </head>
  <body>
    <div class="hello">Hello, Loader</div>
  </body>
  </html>

webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './a.js',
    output: {
      path: path.resolve(__dirname, ''),
      filename: 'bundle.js'
    },
    mode: 'none'
  };

快速入门一节一样,我们安装webpack

  npm install --save-dev webpack@4.43.0    webpack-cli@3.3.12    

然后执行npx webpack打包,这个时候报错了,提示我们需要安装相应的loader来处理CSS文件。

webpack loader

这里我们安装两个loader,分别是css-loader与style-loader。

其中css-loader是必需的,它的作用是解析CSS文件,包括解析@import等CSS自身的语法。它的作用也仅仅是解析CSS文件,它会把CSS文件解析后,以字符串的形式打包到JS文件中。不过,此时的CSS样式并不会生效,因为我们需要把CSS插入到html里才会生效。

此时,style-loader就来发挥作用了,它可以把JS里的样式代码插入到html文件里。它的原理很简单,就是通过JS动态生成style标签插入到html文件的head标签里。

我们来安装这两个loader

  npm install css-loader@3.6.0 style-loader@1.2.1   

webpack.config.js里配置上这两个loader

  const path = require('path');

  module.exports = {
    entry: './a.js',
    output: {
      path: path.resolve(__dirname, ''),
      filename: 'bundle.js'
    },
    module: {
      rules: [{
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }]
    },
    mode: 'none'
  };

可以看到,我们需要对配置项新增module,该项是一个对象,其rules里是我们对各个类型文件的处理规则配置。

test值是一个正则表达式,表示当文件名后缀是.css的时候,我们使用对应use项里的loader。

use值是一个数组,每一项是一个loader。loader的执行顺序是从后向前执行,先执行css-loader,然后把css-loader执行的结果交给style-loader执行。

现在我们执行npx webpack来完成打包,然后在浏览器打开index.html,发现CSS生效了,文字颜色变成蓝色。

三、小结

1.loader就是帮助Webpack来处理各种类型文件的,其执行顺序是从后向前。后续章节我们会学习到前端开发中必用的loader;

1.你也许想问,css-loader为何不增加功能,完成对CSS解析后,自动插入到html里?这是因为在线上环境里,我们一般需要把CSS提取到单独的CSS文件里,如果css-loader把样式插入到了html,反而坏事了。在对线上环境打包的时候,我们就不需要style-loader了,而是通过插件把CSS提取处理。关于插件的内容,在后续章节讲解。

笔记与思考

发表评论

邮箱地址不会被公开。 必填项已用*标注