webpack學習筆記(二）loader

一. 什麼是loader

• webpack在打包的時候本身隻能處理以.js結尾的檔案，為了使其能打包處理其他各種類型的檔案就增加了loader子產品；
• 我們在打包對應的類型子產品的時候，隻需要下載下傳對應的loader,然後在webpack.config.js中的module配置相中設定配置規則就可以了（具體可以檢視官網的loader來确定打包各類子產品是以依賴的loader)。
• 多個loader時的執行順序是從下向上或者從右向左

二. 靜态資源打包（具體可以檢視官網的中文文檔下的指南下的管理資源）

1. 圖檔篇

圖檔打包可以用url-loader或者file-loader

url-loader：

可以把圖檔以base64的格式打包到js檔案中去，我們可以為設定limit配置項，如limit：204800 意思是當圖檔的大小超過200kb的時候将圖檔打包成單獨的檔案，小于的時候直接以base64的形式打包到js檔案中。

// loader配置項
	module: {
		rules: [{
			test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
			use: {
				loader: 'url-loader',
				// options具體配置項檢視官方文檔
				options: {
					//打包到dist目錄下的images檔案夾下，并且名字不變
					name: '[name].[ext]',
					outputPath: 'images/',
					limit: 10240
				}
			}
		}]
	},
           

file-loader：

将圖檔單獨打包

// loader配置項
	module: {
		rules: [{
			test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
			use: {
				loader: 'file-loader',
				// options具體配置項檢視官方文檔
				options: {
					//打包到dist目錄下的images檔案夾下，并且名字不變
					name: '[name].[ext]',
					outputPath: 'images/'
				}
			}
		}]
	},
           

2. 樣式篇

(1) 依賴的loader：css-loader和style-loader,配置好後運作npm run bundle進行打包

css-loader可以幫助我們分析出各個css檔案之間的關系

style-loader将css-loader生成的一個css樣式挂載到頁面的header部分

webpack.config.js

// loader配置項
	module: {
		rules: [{
			test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
			use: {
				loader: 'url-loader',
				// options具體配置項檢視官方文檔
				options: {
					//打包到dist目錄下的images檔案夾下，并且名字不變
					name: '[name].[ext]',
					outputPath: 'images/',
					limit: 10240
				}
			}
		},{
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }]
	},
           

index.js

import './css/index.css';

var img = new Image();
img.src = img1;
img.classList.add('avatar')

var root = document.getElementById('root')
root.append(img)
           

index.css

@import url("avatar.css");
           

avatar.css

.avatar{
	width: 100px;
	height: auto;
}
           

(2) sass檔案的打包除了依賴css-loader和style-loader，還需要sass-loader,同時還需要安裝node-sass

指令行運作

npm install sass-loader node-sass  --save-dev
           

對webpack.config.js進行配置

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

(3) 樣式中自動添加廠商字首所依賴的loader=》postcss-loader

• 安裝完postcss-loader後，需要在項目的根目錄下建立postcss.config.js檔案并進行配置
• 在postcss.config.js檔案中我們隻需要保留plugins配置項就可以了
• 然後我們還需要下載下傳autoprefixer插件在postcss.config.js的plugins配置項中引用

postcss.config.js

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

webpack.config.js

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

(4)css-loader常用的配置項

• importLoaders

  webpack.config.js

{
	test: /\.scss$/,
	use: [ 
   		'style-loader', 
   		{
   			loader: 'css-loader',
   			options: {
   				/* 意思是當你用import引用樣式檔案時，不管在哪引用的都要走下面的兩個loader,
   				這樣才能保證不管你是在js中引入的還是在其他樣式檔案引入的樣式檔案都能從上
   				至下或者從右向左走一遍所有的loader */
   				importLoaders: 2
   			}
   		},
   		'sass-loader',
   		'postcss-loader' ,
   ]
}
           

• modules css打包的子產品化

  在index.js中引入的樣式檔案會成為全局的樣式檔案，會對所有的檔案的樣式産生影響，為了解決這個問題引入了css子產品化的概念，使得樣式隻在指定的子產品下生效

{
	test: /\.scss$/,
	use: [ 
   		'style-loader', 
   		{
   			loader: 'css-loader',
   			options: {
   				/* 意思是當你用import引用樣式檔案時，不管在哪引用的都要走下面的兩個loader,
   				這樣才能保證不管你是在js中引入的還是在其他樣式檔案引入的樣式檔案都能從上
   				至下或者從右向左走一遍所有的loader */
   				importLoaders: 2,
   				//意思是開啟css的子產品打包
   				modules: true
   			}
   		},
   		'sass-loader',
   		'postcss-loader' ,
   ]
}
           

然後index.js中引入樣式檔案的方式也要改變，如果其他檔案也要用該樣式，那就在該檔案引入就好了

index.js

import img1 from './images/1.jpg'
import createAvater from './avater.js'
//原先的引入方式
// import './css/index.scss';

//采用css子產品打包後的引入方式
import css from './css/index.scss';
console.log(css)

createAvater()

var img = new Image();
img.src = img1;

//原先
// img.classList.add('avatar')

//子產品打包
img.classList.add(css.avatar)

var root = document.getElementById('root')
root.append(img)
           

(5) 用webpack打包字型檔案

• 在src目錄下建立font檔案夾，并把iconfont各種格式的檔案放入其中
• 把iconfont.css檔案放到css檔案夾中，并修改@font-face引入文字檔案的路徑
• index.js中引入iconfont.css檔案
• 配置webpack.config.js檔案

{
   test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
   use: {
   	loader: 'url-loader',
   	// options具體配置項檢視官方文檔
   	options: {
   		//打包到dist目錄下的images檔案夾下，并且名字不變
   		name: '[name].[ext]',
   		outputPath: 'images/',
   		limit: 10240
   	}
   }
}