如何打包csss/scss文件类型
在webpack.config.js进行如下配置
1:cnpm install style-loader –D
2:cnpm install css-loader –D
3:cnpm install sass-loader node-sass –D
备注:use:['style-loader','css-loader','sass-loader','postcss-loader']这个顺序不可以改变,这里打包的顺序是下而上,先是把scss文件翻译成css文件,然后再由style-loader挂载在head上
因为我们在用css3新特性的时候,还需要添加浏览器前缀,兼容ie
所以还需要以下步骤
1:npm install postcss-loader
2:新建文件postcss.config.js
3:npm install autoprefixer –D
因为最新的浏览器不需要兼容了,要做到兼容可以配置兼容的浏览器版本
4:在package.json文件里配置以下信息
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
5:重新cnpm install
importLoaders:2, 备注:这个目前没用了,可以不用配置
//配置的意思是,因为我们直接在index.js文件里面引入了index.scss,而avater.scss是被引入到index.scss里面的
//我们打包index.scss时候会按照正常流程从postcss-loader-->sass-loader--->css-loader--->style-loader
//但是对于import语法引入在index.scss里面的avater.scss文件而言就不会从postcss-loader打包开始了,这个时候我们需要
//配置importloader属性,告诉webpack打包工具,对于import语法引入的scss文件,也需要从postcss-loader打包开始
module:true
//模块化的css,一个样式只作用于一个模块,而不是全局的样式
//如果我们想给css-loader增加一些配置,这个地方就不能写字符串'css-loader'了,要写一个对象
如:
{
loader:'css-loader',
options:{
importLoaders:2,
module:true
}
},
const path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './src/index.js'
},
module: {
rules: [{
test: /.(jpg|png|gif)$/,
use: {
loader: 'url-loader',// 'file-loader',
options:{
//placeholder 占位符 作用:打包前文件的名字是什么,打包后还是什么 name:'[name].[ext]'
//打包后的文件是文件名+has+后缀
name:'[name]_[hash].[ext]',
ontputPath:'images/',
limit:2048
//如果文件小于2048,就以bate64的形式打包在一个js文件中,因为文件比较小,所以没必要再浪费一次http请求
//如果文件大于2048,就像file-loader一样,将图片打包放在dist/images文件下
}
}
},{
test: /.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
modules: true
}
},
'sass-loader',
'postcss-loader'
]
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}