webpack学习笔记（二）
如何打包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')
}
}
