Webpack04-Loader之CSS打包进JS
目的：通过压缩文件（比如js，css等），合并多个文件，从而减少http请求，提升访问速度
主要通过Loaders，简单的举几个Loaders使用例子：
可以把SASS文件的写法转换成CSS，而不在使用其他转换工具。 可以把ES6或者ES7的代码，转换成大多浏览器兼容的JS代码。 可以把React中的JSX转换成JavaScript代码。
注意：所有的Loaders都需要在npm中单独进行安装，并在webpack.config.js里进行配置。
打包css进JS
1、安装
npm install style-loader -s -d
npm install css-loader -s -d2、配置
方式一：use方式
module: { // 模块：例如解读CSS，图片转换压缩等
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},方式二：load方式
module: { // 模块：例如解读CSS，图片转换压缩等
rules: [{
test: /\.css$/,
loader: ['style-loader', 'css-loader']
}]
},方式三：use+load方式（常用）
module: { // 模块：例如解读CSS，图片转换压缩等
rules: [{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
}]
},
image.png
3、css文件
image.png
4、运行
webpack参考文章
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录