前言:
- 本文演示了如何打包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>: