一、webpack如何打包样式资源?
上篇介绍到什么是loader,这篇我们使用 ‘style-loader’,‘css-loader’,‘scss-loader’,这些loader来处理样式文件
备注:本文node版本10.13.0 ,webpack版本4.26.0 webpack-cli版本3.1.2
二、打包css,scss文件详细配置
1、安装 style-loader, css-loader, sass-loader
npm i style-loader css-loader sass-loader node-sass -D
2、配置webpack.config.js
const path = require('path');
module.exports = {
// 入口文件
entry: './src/index.js',
output: {
// 输出文件名
filename: 'built.js',
// 输出文件路径
path: path.resolve(__dirname,'dist')
},
// 配置loader模块
module: {
rules: [
{
// 找到项目中的css资源
test: /\.css$/,
use: [
// 将生成的css文件添加到html 的head头里
'style-loader',
// 判断多个css文件之间关系,生成一个css文件
'css-loader'
]
},
{
// 找到项目中的scss资源
test: /\.scss$/,
use: [
// 将生成的css文件添加到html 的head头里
'style-loader',
// 判断多个css文件之间关系,生成一个css文件
'css-loader',
// 将scss文件编译成css文件
// 安装sass-loader 时需要同时安装 node-sass
'sass-loader'
]
}
]
},
// 打包模式有两种:development和production;默认是production模式,会自定压缩代码
mode: 'development'
}
3、自动添加css3浏览器兼容前缀
-
下载postcss-loader
npm i postcss-loader -D
-
配置webpack.config.js文件
{ // 找到项目中的scss资源 test: /\.scss$/, use: [ // 将生成的css文件添加到html 的head头里 'style-loader', // 判断多个css文件之间关系,生成一个css文件 'css-loader', // 将scss文件编译成css文件 // 安装sass-loader 时需要同时安装 node-sass 'sass-loader', 'postcss-loader' ] }
-
下载自动加前缀插件
npm i autoprefixer -D
-
在项目根目录下新建postcss.config.js文件,配置postcss,引入 autoprefixer
module.exports = { plugins: [ require('autoprefixer') ] }
4、详细配置css-loader
业务场景:当index.js文件中引入a.scss文件,a.scss文件有使用@import ‘./b.scss’,需要增加配置css-loader
{
// 找到项目中的scss资源
test: /\.scss$/,
use: [
// 将生成的css文件添加到html 的head头里
'style-loader',
// 判断多个css文件之间关系,生成一个css文件
{
loader:'css-loader',
options: {
// 确保a.scss文件中引入的其他scss文件都会从下到上依次执行 ‘postcss-loader’, 'sass-loader'
importLoaders: 2,
// 开启css的模块化打包
modules: true
}
}
// 将scss文件编译成css文件
// 安装sass-loader 时需要同时安装 node-sass
'sass-loader',
'postcss-loader'
]
}
webpack系列笔记会持续更新,敬请关注