webpack小demo教你快速上手loader

引言

Loader是webpack中很重要的一部分，他可以对模块的源代码进行转换，我们可以将xx文件，比如xxx.css看成是一个模块，通过import来加载这个模块。在加载模块时，webpack其实并不知道如何对其进行加载，我们必须指定对应的loader来完成这个功能。

https://www.webpackjs.com/concepts/#loader 官方文档中对loader的解释

配置css-loader

对其余的概念我们不多过于赘述，没接触过webpack的同学可以访问我的上一篇文章。小demo快速上手webpack

笔者会以最简单的css-loader为例并为大家直接上代码。

工程安装并初始化

1、创建文件夹并cd进去

2、npm init-y（生成package.json）

3、npm install webpack-cli webpack -D

4、npm install style-loader css-loader -D (安装需要的loader)

5、在package.json里面配置了

项目路径如下(忽略build文件夹，这是打包以后生成的)

几个文件的代码

base.css

body{
  background-color: green;
}
div{
  font-size: 1.5em;
  color: red;
}

component.js,用来创建dom的

import "../css/base.css"  //在这里引入css文件

let div1 = document.createElement('div')
document.querySelector('body').append(div1)
div1.innerHTML = ["Hello","World"].join(" ")
// div1.className = "content"

index.js

import "./js/component"

配置loader

const path = require('path')

module.exports = {
  entry: './src/index.js', //入口
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js'
  },
  module: {    //**module这里是核心代码**
    rules: [{           //rules是个数组表示匹配规则,规则为对象形式
      test: /\.css$/i,     //匹配规则，正则表达式
      use: [
        "style-loader",   //使用style-loader
        "css-loader"      //使用cssloader
      ],
    }]


  }
}

npm run build打包成功后出现

在index.html里引入这个js文件

最终效果（css生效）

几个问题与需要注意的地方

style-loader与css-loader

webpack加载css时需要用到两个loader,style-loader与css-loader。为什么需要用到style-loader呢？
style-loader可以配合css-loader在html页面生成标签<style></style>插入css代码，写过css的同学们应该都知道。

在component.js引入css文件可以吗？

其实webpack在处理引用程序时，会生成一个依赖关系图，这个关系图会帮自动帮我们遍历我们导入的模块，这个无需操心。

转自本人掘金