webpack 基本配置2

在页面中引入一些样式

1.在 项目的JS入口文件 main.js中添加：

import 	'./css/index.css'
import 	'./css/index.less'
import 	'./css/index.scss'

2.安装对应的第三方 loader

cnpm i style-loader css-loader -D
cnpm i less-loader less -D
cnpm i sass-loader node-sass -D

3.添加配置节点

在webpack.config.js中添加配置节点

module:{	//配置所有第三方loader 模块的
	rules: [	//第三方模块的匹配规则
		{ test: /\.css$/, use:['style-loader','css-loader'] },		//处理css文件的loader
		{ test: /\.less$/, use:['style-loader','css-loader','less-loader'] },	    //处理less文件的 loader
		{ test: /\.scss$/, use:['style-loader','css-loader','sass-loader'] },	    //处理scss文件的 loader
	]
}