webpack vue css独立,Vue.js进阶系列(16)--webpack配置CSS文件

没错，正如你们想的那样子，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关键字下进行配置。