style-loader和css-loader

乐之者java

于 2020-06-29 13:48:58 发布

阅读量830

点赞数 1

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/107018695

版权

前端专栏收录该内容

175 篇文章 2 订阅

订阅专栏

在使用了webpack之后，给了我们两种大的选择来使用css，一种就是我们传统的方式通过

<link href="./public/css/users/users.css" rel="stylesheet"/>

的方式来引入，这是我们很熟悉的方式；另外，我们还可以见到下面这种写法，就是在js文件里面写到：

import './index.css';

然后再也页面上这个index.css还生效了，这是怎么一回事呢？这跟我这次要说的style-loader和css-loader有关系。

一、安装style-loader和css-loader

F:\Program\appserver\AppServ\www\proedu>npm install --save-dev style-loader css-loader

二、修改webpack.config.js，如下：

const path = require('path');
module.exports = {
  entry: "./demo.js", 
  output: {
    path: path.resolve(__dirname, "dist"), 
    filename: "demo_compiled.js"
  },
  mode:'development',  
  watch:true,
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude:/(node_modules|bower_components)/,
        loader: "babel-loader",
        options: {
          presets: ["es2015"]
        }
      },
	  {
        test: /\.css$/,
        loader: ['style-loader', 'css-loader']
      }
    ]
  }
}

其中

	  {
        test: /\.css$/,
        loader: ['style-loader', 'css-loader']
      }

这一段就是新增的配置，这两个东西的工作原理文章最后说，我们先继续进行下面的工作。

三。新建index.html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>管理后台-用户列表</title>
<script src="./dist/demo_compiled.js"></script>
</head>
<body >
	<div id="root">
		
	</div>
	<p>页面上的乐之者java</p>
</body>
</html>

引入了用webpack编译后的demo_compiled.js。

四、编写demo.js:

import './index.css';
window.onload=function(){
    document.getElementById("root").innerHTML="<h1>js写的乐之者java</h1>";	
}

很简单，只是import了当前路径下一个叫做index.css的文件，然后使用js在id为root的元素里面插入了一句html代码。

五、再看看index.css

p{
	color:red;
}
h1{
	font-size:14px;
	color:green;
}

好了，相关的文件都编写完毕了，我们使用浏览器打开index.html,查看效果是什么样的呢？

六、从上边的图中，我们看到，css已经起作用了，而且最终的效果是在index.html页面的head标签之前加入了style标签，二style标签里面的内容正是index.css里面的内容。现在看来，style-loader和css-loader的作用已经很明显了，webpack使用它们干了什么事也慢慢浮出水面了：

我们在webpack.config.js里面配置了style-loader和css-loader后，遇到后缀为.css的文件，webpack先用css-loader加载器去解析这个文件，遇到类似“import "xxx.css"”这类引入css的语句就将相应css文件引入（也就是说，如果没有css-loader，就没法解析这类语句），最后将计算完的css（之所以说计算，是因为有可能是使用less等预编译语言编写的css）通过style-loader放入到一个style标签里面，最终放到页面的head标签里，流程就是这样了。

还有一点需要注意的是，loader是有顺序的，webpack肯定是先将所有css模块依赖解析完得到计算结果再创建style标签。因此应该把style-loader放在css-loader的前面（webpack loader的执行顺序是从右到左）。