webpack之引入css

前言：

• 本文演示了如何打包css文件；
• 涉及到的loader: css-loader、style-loader;
• css-loader的任务：把css文件作为模块打包
• style-loader的任务：把打包好的css文件动态的插入到html文件的<style>标签内
  

正文：

如何利用webpack把样式打包进我们的项目文件？

在webpack的世界里，一起文件都是模块。

默认webpack只会打包js代码，如何想要打包其它内容，就需要相对应的loader。

安装css-loader、style-loader

$ npm i -D css-loader style-loader

配置webpack.config.js

注意：loader处理的顺序：

• 先是css-loader处理（webpack把mian.css文件作为模块打包）
• 接着是style-loade处理（让打包后的css可以写入html文件中的<style>）
  

在app.js文件中引入main.css

编辑main.css

最后，执行 $ npm run build

在浏览器预览生成的index.html文件，打开控制台可以看到js动态加载的<style>：