从零开始搭建一个前端框架（四）通过css-loader实现项目对样式文件打包

说在前面

正常开发一个前端项目，不可能只有JS文件，为了让页面有更好的效果我们还会引入CSS文件，开发VUE项目，我们也会使用以.vue为后缀的文件。更多的，还有字体，图片，音视频，markdown等等。我们要知道，webpack默认只能打包处理JS文件的类型，既然webpack作为如今主流的项目打包方案，他肯定支持各种类型的文件打包，下面我们来看看loader能给我们带来什么惊喜。

第三方 loader

首先说明一件事，.vue文件最终是会被转化为js文件的，所以在vue文件中引入的css等资源也是需要被打包的。好，我们一步一步来，先完成js文件中的样式解析。

css-loader

修改index.js，然后同目录下新建index.css文件。

index.css:

.rect{
    background-color: red;
    width: 100px;
    height: 100px;
}

index.js:

const Vue = require('vue');
import './index.css'
const Index = {
    data() {
        return {
            message: 'Hello @Vue!'
        }
    },
    mount() {
        let div = document.createElement("div");
        div.className = "rect";
        div.innerText = "hello div";
        document.getElementsByTagName("body")[0].appendChild(div);
    }
}
Vue.createApp(Index).mount('#app')

此时我们执行npm run serve，报错提示You may need an appropriate loader to handle this file type,我们需要引入合适的loader，好。

npm install css-loader --save-dev

然后编辑webpack.config.js文件，有没有发现，现在我们自己的配置文件已经初具规模了~

module.exports = {
	module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    { loader: "css-loader" }
                ]
            }
        ]
    },
}

然后我们执行npm run serve，此时已经不会报错了，查看页面的效果：

可以发现，虽然解析没有报错，但是样式并没有正确的应用到内容，因为css-loader只是完成了css文件的解析，我们还需要style-loader帮助我们将解析后的css内容,以css的样式挂载到生成的html页面中。

style-loader

安装：

npm install style-loader --save-dev

修改webpack.config.js，添加一句：

use: [
    { loader: "style-loader" }, // 新增
    { loader: "css-loader" }
]

值得注意的是，使用loader的顺序应该遵循从下到上的顺序，如上图所示，会先执行css-loader，然后再由style-loader完成最终转换。

由此我们也可以稍微发散一下思维，如今比较火的sass，如果想为他添加一个loader，应该放到什么位置，没错，就是css-loader下面！！

执行npm run serve，我们来看现在的页面截图：

说到最后

后续1-2篇文章，会持续输出对loader的应用实践，敬请关注。