webpack开发环境常用功能

集成样式文件 处理css文件

npm install css-loader style-loader --save-dev

webpack 默认只能打包js文件不能打包其他的非 js 文件
打开webpack.config.js 这个配置文件，在里面新增一个配置节点，叫做 module，它是一个对象，在这个moduel对象身上，
有个rules属性，这个rules属性是个数组，这个数组中存放了所有第三方文件的匹配和处理规则

module:{
		rules:[
			{
				test:/\.css$/,
				use:['style-loader','css-loader'],
			}
		]
	}

第三方loader规则
webpack 处理第三方文件类型的过程

发现文件不是js文件，然后就去配置文件中查找有没有第三方loader 规则如果找到对应的规则就会使用对应的loader 处理这种类型文件在调用loader的时候从后往前调用当把最后一个loader调用完毕，把结果返回给webpack，webpack打包合并，最终输出到bundle.js 处理less文件

安装less-loader
less-loader配置

module:{
		rules:[
			{
				test:/\.less$/,
				use:['stylle-loader','css-loader','less-loader'],
			}
		]
	}

处理scss文件

安装sass-loader

npm install sass-loader --save-dev

module:{
		rules:[
			{
				test:/\.scss$/,
				use:['stylle-loader','css-loader','sass-loader'],
			}
		]
	}

处理图片路径

安装url-loader

npm install url-loader --save-dev

url-loader配置

module:{
		rules:[
			{
				test:/\.(jpg|png|gif|bmp|jpeg)$/,
				use:'url-loader?limit=10000',
			}
		]
	}

集成typescript 安装typescript

npm install typescript --save-dev

安装ts-loader

npm install ts-loader --save-dev

创建typescript配置文件

tsc --init

配置webpack.config.js

module:{
	rules :[
		{
			test:/.tsx?$/,
			use:'ts-loader',
			exclude:/node_modules/,
		}
	]
},
resolve:{
	extensions:['.tsx','ts','js'],
},