解决webpack 打包 样式的 问题

解决css文件      cnpm i style-loader css-loader -D	{ test: /\.css$/, use: ['style-loader','css-loader'] }
解决less文件	 cnpm i less-loader less -D    		{ test: /\.less$/, use: ['style-loader','css-loader','less-loader'] }
解决scss文件 	 cnpm i sass-loader node-sass -D   	{ test: /\.sass$/, use: ['style-loader','css-loader','sass-loader'] }



解决图片文件	 cnpm i url-loader file-loader -D
	{test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=3000000&name=[hash:8]-[name].[ext]'}, // 处理图片路径的 loader
        		// limit 给定的值,是图片的大小,单位是 byte ,如果我们 引用的 图片,大于或等于给定的 limit 值,则不会被转为 base 64格式的字符串, 如果 图片小于给定的 limit 值,则会被转为 base64的字符串。


解决字体文件    
	{ test: /\.(ttf|eot|svg|woff|woff2$)/, use: 'url-loader'}, //处理 字体文件的 loader

        { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //配置 Babel 来转换高级的 ES 语法




使用babel , 可以帮我们将高级的语法转换为低级的语法
	cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
	cnpm i babel-preset-env babel-preset-stage-0 -D
	{ /\.js$/ , use: 'babel-loader', exclude: /node_modules/ }


	{ test: /\.vue$/, use: 'vue-loader' },  // 处理 .vue 文件的loader

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

java冯坚持

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值