说在前面
正常开发一个前端项目,不可能只有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
的应用实践,敬请关注。