Webpack打包css文件-css-loader+style-loader

一,前言

之前"webpack介绍"一篇中提到webpack的四个核心概念:
    entry-入口,output-出口,loader-加载器,plugins-插件

前面打包和输出文件使用了entry和output
之前说过Webpack只能处理js和Json格式的文件,所以css,图片这些不是webpack能直接处理的资源

这里就用到了loader-加载器,如:css,图片都有其对应的loader加载器
在webpack的世界里,一切皆为模块
加载器的作用是将类似css这种webpack不能处理的文件转化为其可以处理的模块

这篇介绍Webpack使用css-loader打包css文件

---

二,创建css文件并打包

在上一篇的Demo基础上创建css文件-新建src/css/test.css

test.css-简单的为body添加背景色:

body{
    background-color: blue;
}

添加css文件后的目录结构:

在入口文件entry.js中引入css:

body{
    background-color: blue;
}

添加css文件后,运行webpack命令,打包输出文件:

Brave:webpack Brave$ webpack
Hash: df5386d5152e03e3e4db
Version: webpack 3.8.1
Time: 91ms
    Asset     Size  Chunks             Chunk Names
bundle.js  4.49 kB       0  [emitted]  main
   [0] ./src/js/entry.js 487 bytes {0} [built]
   [1] ./src/js/second.js 141 bytes {0} [built]
   [2] ./src/data/testdata.json 44 bytes {0} [built]
   [3] ./src/css/test.css 170 bytes {0} [built] [failed] [1 error]

ERROR in ./src/css/test.css
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
| body{
|     background-color: blue;
| }
 @ ./src/js/entry.js 10:0-25

打包输出异常,查看log发现webpack在处理css文件时出错了
原因是webpack只能处理js和json文件,不能直接加载css文件

需要使用css对应的loader来对其进行处理

---

三,使用Loader处理css

参考webpack的官方文档:
https://webpack.docschina.org/loaders/css-loader/

官方文档给出里webpack加载css文件的解决方法,使用css对应的loader
使用css-loader和style-loader两个加载器来处理css文件

css-loader:只负责加载css模块,不会将加载的css样式应用到html
style-loader:负责将css-loader加载到的css样式动态的添加到html-head-style标签中

安装css-loader和style-loader

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

安装完成后,查看package.json:

{
  "name": "webpack_test",
  "version": "1.0.0",
  "devDependencies": {
    "css-loader": "^1.0.0",
    "style-loader": "^0.21.0",
    "webpack": "3.8.1"
  }
}

在webpack.config.js中添加处理css文件的loader配置:

const path = require('path');

module.exports = {
    entry: './src/js/entry.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist/js/')
    },
    // 模块对象
    module: {
        // 规则
        rules: [
            {
                // 正则匹配所有以.css结尾的文件
                test: /\.css$/,
                // 使用css-loader和style-loader依次对css文件进行处理
                // 按照数组中从后往前的顺序
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
};

执行webpack命令,重新打包输出文件:

Brave:webpack Brave$ webpack
Hash: 3d1e0c919800dfe1d2b5
Version: webpack 3.8.1
Time: 359ms
    Asset     Size  Chunks             Chunk Names
bundle.js  21.1 kB       0  [emitted]  main
   [0] ./src/js/entry.js 487 bytes {0} [built]
   [1] ./src/js/second.js 141 bytes {0} [built]
   [2] ./src/data/testdata.json 44 bytes {0} [built]
   [3] ./src/css/test.css 1.08 kB {0} [built]
   [4] ./node_modules/css-loader!./src/css/test.css 199 bytes {0} [built]
    + 3 hidden modules

添加了css相关loader后,不再报错
最后一行显示+ 3 hidden modules,有三个模块被隐藏
可以执行webpack --display-modules使其显示出来

执行webpack –display-modules:

Brave:webpack Brave$ webpack --display-modules
Hash: 3d1e0c919800dfe1d2b5
Version: webpack 3.8.1
Time: 353ms
    Asset     Size  Chunks             Chunk Names
bundle.js  21.1 kB       0  [emitted]  main
   [0] ./src/js/entry.js 487 bytes {0} [built]
   [1] ./src/js/second.js 141 bytes {0} [built]
   [2] ./src/data/testdata.json 44 bytes {0} [built]
   [3] ./src/css/test.css 1.08 kB {0} [built]
   [4] ./node_modules/css-loader!./src/css/test.css 199 bytes {0} [built]
   [5] ./node_modules/css-loader/lib/css-base.js 2.26 kB {0} [built]
   [6] ./node_modules/style-loader/lib/addStyles.js 10 kB {0} [built]
   [7] ./node_modules/style-loader/lib/urls.js 3.01 kB {0} [built]

可以看到 5-7 原本隐藏的三个模块的输出信息显示出来了

访问index.html:

css文件打包后放入了js文件,所以看不到打包后的css文件,也无需在index.html引入就可使用

查看页面元素:

---

style标签中的css样式是
由css-loader通过读取css文件得到,
再由style-loader将css-loader加载到的css样式动态的添加到html-head-style标签中
最终将样式应用于页面

结尾

以上就是webpack加载css文件的方法
用过使用css相关的loader对其进行加载,将css文件转为webpack能够处理的模块

对于真实项目,把所有的css都打包进js文件会使js文件变大
后续这里会有一个优化,将css样式单独抽出来一个文件