作用
loader是一種打包的方案，webpack默認(rèn)只識別js結(jié)尾的文件，當(dāng)遇到其他格式的文件后，webpack并不知道如何去處理。此時，我們可以定義一種規(guī)則，告訴webpack當(dāng)他遇到某種格式的文件后，去求助于相應(yīng)的loader。
npm install file-loader -D
webpack.config.js
const path = require('path');
module.exports = {
// 模式：可選為：development, 默認(rèn)為：production
mode: 'development',
// 源代碼文件夾：src
entry: {
main: './src/index.js' // 入口文件
},
module: {
rules: [{
test: /\.jpg$/,
use: {
loader: 'file-loader'
}
}]
},
output: {
filename: 'bundle.js', // 文件名
path: path.resolve(__dirname, 'dist') // 文件夾
}
}
index.js
import pic from './lee.jpg';
var img = new Image();
img.src = pic;
var root = document.getElementById('root');
root.append(img);
打包靜態(tài)資源
圖片
file-loader
const path = require('path');
module.exports = {
mode: 'production',
entry: {
main: './src/index.js' // 入口文件
},
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'file-loader',
options: { // 配置
name: '[name].[ext]', // 以源文件名字及格式輸出
outputPath: 'images/' // 輸出到images文件夾下
}
}
}]
},
output: {
filename: 'bundle.js', // 文件名
path: path.resolve(__dirname, 'dist') // 文件夾
}
}
url-loader
url-loader和file-loader都可以打包圖片，區(qū)別是url-loader會將圖片以base64打包到j(luò)s文件中，當(dāng)圖片過大時，打包的js文件也會過大。所以最佳實(shí)踐是：將小圖片打包為base64，大于某個值的文件打包為圖片。如果在配置中不加limit，所有圖片都會打包為base64。
下面案例的意思是：超過10kb的文件打包為圖片，小于10kb的打包為base64
npm install url-loader --save-dev
const path = require('path');
module.exports = {
mode: 'production',
entry: {
main: './src/index.js' // 入口文件
},
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: { // 配置
name: '[name].[ext]', // 以源文件名字及格式輸出
outputPath: 'images/', // 輸出到images文件夾下
limit: 10240 // 超過10kb打包為圖片
}
}
}]
},
output: {
filename: 'bundle.js', // 文件名
path: path.resolve(__dirname, 'dist') // 文件夾
}
}
字體
file-loader
const path = require('path');
module.exports = {
mode: 'production',
entry: {
main: './src/index.js' // 入口文件
},
module: {
rules: [{
test: /\.(eot|ttf|svg)$/,
use: {
loader: 'file-loader'
}
}]
},
output: {
filename: 'bundle.js', // 文件名
path: path.resolve(__dirname, 'dist') // 文件夾
}
}
樣式
loader 的執(zhí)行順序?yàn)閺暮笙蚯?/p>
style-loader css-loader
css-loader會理清多個css文件之間的引用關(guān)系，最后合并為一個。
style-loader會將css樣式掛載到head的style標(biāo)簽中
npm install style-loader css-loader -D
sass-loader
將scss文件編譯為css
npm install sass-loader node-sass --save-dev
const path = require('path');
module.exports = {
mode: 'production',
entry: {
main: './src/index.js' // 入口文件
},
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: { // 配置
name: '[name].[ext]', // 以源文件名字及格式輸出
outputPath: 'images/', // 輸出到images文件夾下
limit: 10240 // 超過10kb打包為圖片
}
}
},{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}]
},
output: {
filename: 'bundle.js', // 文件名
path: path.resolve(__dirname, 'dist') // 文件夾
}
}
詳細(xì)配置
const path = require('path');
module.exports = {
mode: 'production',
entry: {
main: './src/index.js' // 入口文件
},
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: { // 配置
name: '[name].[ext]', // 以源文件名字及格式輸出
outputPath: 'images/', // 輸出到images文件夾下
limit: 10240 // 超過10kb打包為圖片
}
}
},{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: { // 配置
importLoaders: 1, // scss文件中引用的scss文件也經(jīng)過下面的一個loader打包
modules: true // 開啟模塊化css,引入的css僅在當(dāng)前模塊有效，而不是全局
}
},
'sass-loader'
]
}]
},
output: {
filename: 'bundle.js', // 文件名
path: path.resolve(__dirname, 'dist') // 文件夾
}
}
postcss-loader
為樣式加上廠商瀏覽器前綴
npm i -D postcss-loader
const path = require('path');
module.exports = {
mode: 'production',
entry: {
main: './src/index.js' // 入口文件
},
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: { // 配置
name: '[name].[ext]', // 以源文件名字及格式輸出
outputPath: 'images/', // 輸出到images文件夾下
limit: 10240 // 超過10kb打包為圖片
}
}
},{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
'postcss-loader'
]
}]
},
output: {
filename: 'bundle.js', // 文件名
path: path.resolve(__dirname, 'dist') // 文件夾
}
}
autoprefixer插件
npm install autoprefixer -D
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
