作用
loader是一种打包的方案，webpack默认只识别js结尾的文件，当遇到其他格式的文件后，webpack并不知道如何去处理。此时，我们可以定义一种规则，告诉webpack当他遇到某种格式的文件后，去求助于相应的loader。
npm install file-loader -D
webpack.config.js
const path = require('path');
module.exports = {
// 模式：可选为：development, 默认为：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);
打包静态资源
图片
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都可以打包图片，区别是url-loader会将图片以base64打包到js文件中，当图片过大时，打包的js文件也会过大。所以最佳实践是：将小图片打包为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 的执行顺序为从后向前
style-loader css-loader
css-loader会理清多个css文件之间的引用关系，最后合并为一个。
style-loader会将css样式挂载到head的style标签中
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') // 文件夹
}
}
详细配置
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文件也经过下面的一个loader打包
modules: true // 开启模块化css,引入的css仅在当前模块有效，而不是全局
}
},
'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')
]
}