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/