没错,正如你们想的那样子,webpack的业务能力十分强,除了能够打包js文件,还可以打包CSS文件、图片等等。和安家天下静宜门店的房店长一样,都是拼命十三娘,下面我们就来讲讲webpack的另外一个业务:配置CSS文件
image.png
一、前期工作:loader
webpack:大家知道,我的首要业务是打包项目中的js文件,但是生活越来越艰难,为了生存下去,只能不断拓展自己的业务,比如:加载CSS文件、图片、还有高难度的将ES6转换成ES5,、将.jsx .vue文件转换成.js文件。这么多业务我一个人可是干不过来的,所以我叫了loader兄弟来帮忙。
【1.loader产生原因:webpack主要是打包.js文件,但是一个项目中不可能只有.js文件,还会有CSS文件、图片等等,对于webpack本身的能而言,是不支持这些转换的,解决的办法就是拓展webpack对应的loader】
loader:其实我工作的步骤很简单的,哪里需要我就把我叫过去,然后给我口饭吃就行。
【2.loader步骤:① 通过npm安装相应的loader ②在wenpack.config.js文件中的mouble关键字下进行配置 在后续有会详细的解析】
二、配置CSS文件
CSS:我来这里的目的很简单,我不希望我在加入index.html大家庭的时候只是让script小妞来单独带我进去,我希望能和所有的.js文件一样,通过打包的方式进入到index.html大家庭。这样一来,就不用来一个我的CSS亲戚,你们script小妞就出门迎接一次,大大滴提高了工作效率啊。
【1.CSS文件的引用方式:按照我们以前的惯例,都是用script标签单独引用CSS文件到index.html,但是今时不同往日,我们希望用webpack打包.js文件的时候一同把CSS也打包进去,就不必每使用一个CSS文件就引用一个CSS文件】
CSS:其实让我和.js文件一起打包进去很简单的,首先你得把我叫过来吧,不叫过来就说明index.html就不需要我,然后呢在门口的地方给我进去的标志就行。
【2.CSS文件的打包步骤:① 创建CSS文件 ②在入口函数创建CSS文件的依赖 ③执行打包命令。】
【解析:我们知道,入门函数内部只是告诉webpack一些有关 .js文件的依赖,但并没有CSS文件的依赖,没有依赖关系webpack就不能一起打包,所以需要通过requie创建有关CSS文件的依赖。具体见下图的代码:】
① 创建CSS文件
image.png
body{
background-colco:red;
}
在项目中创建了一个normal的CSS文件,作用是将body的背景颜色改成红色。
②在入口函数创建CSS文件的依赖
image.png
本项目的入口函数是main.js。将CSS文件也当做一个模块,通过require来引入。
③ 执行打包命令
image.png
image.png
因为本项目中,在package.json文件中将webpack和npm run 进行了关联,所以通过npm run build执行打包命令。但是结果发现,我们需要一个loader来处理CSS文件。
使用loader的步骤如下:① 通过npm安装相应的loader ②在wenpack.config.js文件中的mouble关键字下进行配置
详细步骤如下:进入webpack官网(https://www.webpackjs.com/)--> 点击中文文档 --> 点击LOADERS-->点击样式-->点击css loader-->在终端执行相关的命令即可。具体可见下面的图片:
image.png
image.png
image.png
image.png
image.png
这里安装的时候要注意:
① 要加载两个loader:css-loader只负责加载CSS文件,并不会解析里面的样式,所以我们还主要再安安装一个loader:npm install style-loader --save-dev 然后在
② 顺序不能更换:我们在use: [ 'style-loader', 'css-loader' ] 使用两个loader的时候,不能修改'style-loader和css-loader的顺序,因为解析的方向是从右往左解析的,肯定得先有CSS文件再有style样式。
以上就是小编今天为大家分享的用webpack打包CSS文件。总结起来就是两句话:① 通过npm安装相应的loader ②在wenpack.config.js文件中的mouble关键字下进行配置。