webpack中使用Loader打包静态资源

1,732 阅读1分钟

webpack中使用Loader打包静态资源

由于webpack只能打包JS文件,当你在文件中引入Css样式,webpack并不知道你要做什么然后出现报错。

​ 安装

//命令行输入
npm install css-loader style-loader

打开webpack.config.js文件

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

​ css-loader的作用

//css-loader会帮我们分析出几个css文件之间的关系,最终帮我们合并成一段css

​ style-loader的作用

//在得到css-loader生成的内容之后,style-loader会把得到的内容挂载到页面的<head>部分

如何打包scss文件

​ 借助额外的loader(sass-loader)

安装:npm install sass-loader node-sass --sava-dev

​ 打开webpack.config.js文件

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

( 注:loader是从下到上,从右到左的顺序加载,use中的顺序不能改变 )

遇到兼容问题需要加兼容前缀

​ 1.安装

npm install -D postcss-loader

npm install autoprefixer -D

​ 2.打开webpack.config.js文件

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

​ 3.在根目录下创建postcss.config.js文件

module.exports = {
	plugins:[
		require('autoprefixer')
	]
}

css-loader中的常用配置项

​ 1.打开webpack.config.js文件

module:{
	rules:[
		{
			test:/\.scss$/,
			use:[
				'style-loader',
				//将原来的'css-loader'改为对象
				{
					loader:'css-loader',
					options:{
						//在import引入其他的scss时webpack可能不会执行'sass-loader'和‘postcss-								loader’,加了importLoader:2,那么webpack就会按顺序再次执行
						importLoaders:2,
						//css模块化:只在当前模块有效,不影响其他模块,不会和其他模块产生冲突
						modules:true
					}
				},
				'sass-loader',
				'postcss-loader'
			]
		}
	]
}

(注:css模块化在文件中引入时 import style from './index.scss')

如何打包第三方字体文件

icon官网:www.iconfont.cn/

​ 安装

命令行输入:npm install file-loader -D

​ 1.打开webpack.config.js文件

module:{
	rules:[
		{
			test:/\.css$/,
			use:['style-loader','css-loader','sass-loader','postcss-loader']
		},
		//打包外部第三方字体
		{
			test:/\.(eot|ttf|svsg)/,
			use:{
				//实际上就是从src目录下移到dist文件下
				loader:'file-loader‘ 
			}
		}
	]
}

详细阅读webpack官网:webpack.js.org/loaders/