webpack中使用Loader打包静态资源

时间 2020-06-08

原文原文链接

webpack中使用Loader打包静态资源

因为webpack只能打包JS文件，当你在文件中引入Css样式，webpack并不知道你要作什么而后出现报错。javascript

安装css

//命令行输入
npm install css-loader style-loader
复制代码

打开webpack.config.js文件java

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

css-loader的做用node

//css-loader会帮咱们分析出几个css文件之间的关系，最终帮咱们合并成一段css
复制代码

style-loader的做用webpack

//在获得css-loader生成的内容以后，style-loader会把获得的内容挂载到页面的<head>部分
复制代码

如何打包scss文件

借助额外的loader（sass-loader）web

安装：npm install sass-loader node-sass --sava-devnpm

打开webpack.config.js文件sass

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

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

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

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/