2019-07-17

8 分钟读完 (大约 1142 个字)

webpack入门(4): loader的使用，style-loader，css-loader

本篇文章会教你如何上手webpack的loader，以使用style-loader 、css-loader为例子

下面就正式开始吧

准备工作

css-loader和style-loader的作用

css-loader能够解析css
style-loader能够将导入的css自动添加进html文档

安装

安装style-loader和css-loader

1 2	npm install --save-dev style-loader npm install --save-dev css-loader

添加文件

为了做演示，这里写了一个简单的css文件，配合入口文件index.js

style.css

* {
    padding: 0;
    margin: 0;

}

body {
    background: darkblue;
    height: 100vh;
}

p {
    color: red;
}

在index.js中导入这个样式表

index.js

1
2
3

import './style.css'

document.body.innerHTML = '<p>hello world</p>'

目录结构

目录结构

开始打包

这时候我们还没有安装loader，webpack只会认识js文件，如果有import其他文件，解析就会发生错误

error

这里提示

1 2	odule parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

就是因为在index.js中我们导入了style.css导致webpack不能正确解析其内容，这时候我们的loader就派上用场了

在webpack.config.js中添加以下配置项

const path = require('path');
const webpack = require('webpack');


module.exports = {
    mode: 'development',
    entry: 'src/index.js',
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    },
    module: {
        rules: [
            {
                test: /\.css$/, //文件类型
                use: [
                    { loader: "style-loader" }, //使用loader处理，顺序相反
                    { loader: "css-loader" },
                ],
            },
        ],
    },
}

这里使用了module选项，

使用rule添加规则
test属性表示要处理的文件类型，用正则表达式进行匹配
use表示所使用的loader，顺序相反，这里的写法就是先使用css-loader再使用style-loader

输入指令npm run build开始打包

Hash: d47ac130136c47b10f70
Version: webpack 4.37.0
Time: 269ms
Built at: 08/12/2019 2:09:12 PM
  Asset    Size  Chunks             Chunk Names
main.js  24 KiB    main  [emitted]  main
Entrypoint main = main.js
[./node_modules/css-loader/dist/cjs.js!./src/style.css] 296 bytes {main} [built]
[./src/index.js] 69 bytes {main} [built]
[./src/style.css] 1.06 KiB {main} [built]
    + 3 hidden modules

上面显示成功打包模块index.js和style.css

这时候在dist目录输出了main.js

1565590581223

我们在index.html引入main.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>
<body>
    <p>hell world</p>
    <script src="main.js"></script>
</body>
</html>

打开查看效果

1565590627385

可以看见导入的css发挥了作用

查看head标签

1565590690033

可以看见打包后的main.js自动为我们生成了样式表文件

更高级的使用方法

一般loader的使用还会有很多的配置选项，如何查看这些选项呢。

授人以鱼不如授之以渔

首先我们进入webpack官网，找到loader列表，然后找到css-loader
进入它的git仓库
在这里能看见很多关于此loader的介绍
比如这里有一个选项叫做modules

我们照着它的文档说明，添加此选项，看看有啥效果

下面在css-loader中添加了options属性，设置modules： true

const path = require('path')
const webpack = require('webpack')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.css$/, 
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true  //使用modules选项
            }
          }
        ]
      }
    ]
  }
}

更改css和js
css
1
2
3
.test {
color: red;
}

**js**

1
2
3
import style from './style.css'

document.body.innerHTML = `<p class="${style.test}">hello world</p>`=
 这里我们import了style，然后使用了给p元素的class设置成了style.test