webpack—part02——webpack 打包css文件

承接day01项目 https://mp.csdn.net/postedit/84999721

1.新建css文件

2.导入hello.js文件中

运行终端 webpack hello.js hello.bundle.js 报错，webpack不能打包css文件

其中画绿线的地方表示，我们需要一个该文件类型的loader去解析它

从以上截图可以看出，我们虽然引入了style.css 但是我们并没有给这个文件指定一个相应的loader。这个时候呢，我们只需要给它指定相应的loader。 css文件的话 这个loader就是 css-loader。 用它来处理。

那么就要先安装一下：npm install css-loader --save--dev

写法如下：

在css文件路径前加上css-loader！ 就行

再次打包，成功！

 

3. 建立一个html文件，引入打包好的hello.bundle.js文件。修改一下css文件。将body变为red

如图。 点击该html， 发现打开的页面全白色，body并没有变为红色？？？？？

原来是我们还需要引入一个解析css 样式的loader   style-loader

npm install style-loader --save--dev 安装一下。

再进入hello.js 引入一下

重新打包，页面全红，成功！

 

总结：

css-loader ： 处理.css 文件

style-loader：就是通过css-loader 处理完之后的文件，把这个文件新建一个style标签，插入到我们的页面html里面，然后css就会直接变为内嵌css