淘先锋技术网

首页 1 2 3 4 5 6 7

webpack 怎样配置 去解析css模块

1 安装css-loader, style-loader :
在cmd命令行中 yarn add css-loader style-loader -D 回车
2 编辑webpack.config.js ,

module:{
        rules:[// css-loader处理@import，style-loader是将css插入head 标签中，loader是希望单一，
            //loader 顺序是从右向左执行，loader还可以写成对象的方式，就是{}
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    }

index.css 中引入a.css:

body{
    background: red
}
@import './a.css';

index.js 中引入index.css, require 或者import 都可以：

let str2 = require('./index.css');
//import './index.css';
let str = require('./a.js'); // 不可能在broswer中跑，因为这里仅仅是node的规范
console.log(str);
console.log(str2);

出现以下错误:
Error: EBUSY: resource busy or locked, open ‘D:\code\nodejscode\webpack_demo\dis
t\index.html’ 有可能是chrome 没关闭的原因。
在这里插入图片描述
再次发布，成功，查看源码，html 中依旧只引入bundle.js,

<html>
<head></head>
<body>
<script type="text/javascript" src="bundle.js"></script></body>
</html>

但在chrome 中，bundle.js 已经解析出来 bundle.js 在head 中。
在这里插入图片描述

tip： style解析顺序，都是body，都是style那就最下边的覆盖上边的，因为style 标签从上往下顺序加载。

在这里插入图片描述

如果想自定义的（pink）奏效，则让 js 中打包的样式置顶: insertAt: ‘top’ :

module:{
        rules:[// css-loader处理@import，style-loader是将css插入head 标签中，loader是希望单一，
            //loader 顺序是从右向左执行，loader还可以写成对象的方式，就是{}
            {
                test:/\.css$/,
                use: [
                    {
                      loader: 'style-loader',
                      options: {
                          insertAt: 'top', //Insert style tag at top of <head>
                          singleton: true, //this is for wrap all your style in just one style tag
                        }
                    },
                    "css-loader"
                  ]
            }
        ]
    }

思考的问题：
为什么要在js 中引入css, 而不是如下，直接在html 中引入？

<html>
<head></head>
<body>
   <link rel="stylesheet" href="index.css">
</body>
</html>

因为webpack 本身就是模块化打包，用webpack 就是要发挥该作用。