1.file-loader
npm install file-loader -D
主要用来加载静态文件,例如.txt .md .png .word .pdf
等等。原理是把打包入口
识别的资源模块,移动至输出目录,并返回一个地址名称
module: {
rules: [{
test: /\.(png|jpe?g|gif)$/,
//use使⽤⼀个loader可以⽤对象,字符串,两个loader需要⽤数组
use: {
loader: "file-loader",
// options额外的配置,⽐如资源名称
options: {
// placeholder 占位符包括 [ext]、[name]、[hash]等等
// https://webpack.js.org/loaders/file-loader#placeholders
name: "[name]_[hash].[ext]",
//options里边还可以用函数
name (file) {
if (env === 'development') {
return '[path][name].[ext]'
}
return '[hash].[ext]'
},
//打包后的存放位置
outputPath: "images/"
}
}
}]
},
2.url-loader
npm install --save-dev url-loader
url-loader 是file-loader的加强版
,可以处理file-loader的所有事情,还能将较小的图片模块转换为base64
,直接打包到js文件中。
module: {
rules: [{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: "url-loader",
options: {
name: "[name]_[hash].[ext]",
outputPath: "images/",
//⼩于2048,才转换成base64,单位是byte
limit: 2048
}
}
}]
},
3.css相关的loader
npm install style-loader css-loader less less-loader -D
上边安装的loader是用来加载和转换css文件,或者.less文件
module: {
rules: [{
test: /\.css$/,
include: path.resolve(__dirname, "./src"), // 推荐使用,在哪里查找文件
// exclude:path.resolve(__dirname,"./node_modules"), // 排除哪里的文件
// loader有顺序,从右到左,从下到上
use: ['style-loader','css-loader']
},
{
test: /\.less$/,
include: path.resolve(__dirname, "./src"), // 推荐使用,在哪里查找文件
// exclude:path.resolve(__dirname,"./node_modules"), // 排除哪里的文件
// loader有顺序,从右到左,从下到上
use: [
'style-loader',
'css-loader',
'less-loader'
}]
},
4.postcss-loader
npm i -D postcss-loader
postcss-loader可以给css样式,自动添加前缀,以适应各浏览器
module: {
rules: [{
test: /\.(png|jpe?g|gif)$/,
use: ['style-loader','css-loader',{
loader: 'postcss-loader',
options: {
config: {
path: 'postcss.config.js' //这个可以修改postcss.config.js的路径,不填写默认是根目录的postcss.config.js
}
}
}]
}]
},
//postcss.config.js
module.exports = {
plugins: [
require("autoprefixer")({
overrideBrowserslist: ["last 2 versions", ">1%"] //支持浏览器最新的两个版本,所有市场份额大于1%的浏览器,都要进行处理
})
]
}
5.Babel处理ES6
npm i babel-loader @babel/core @babel/preset-env @babel/polyfill -D
babel-loader是webpack与babel的通信桥梁
,不会做把es6
转换成es5的工作,这部分工作需要用到@babel/preset-env。@babel/preset-env包含了es6、7、8转换为es5的规则
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1"
},
corejs: 2,//新版本需要指定核⼼库版本
useBuiltIns: "entry"//按需注⼊
}
]
]
}
}
}
// 也可以将这里的options单独写在.babelrc文件中
//.babelrc
{
presets: [
[
"@babel/preset-env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1"
},
corejs: 2, //新版本需要指定核⼼库版本
useBuiltIns: "usage" //按需注⼊
}
]
]
}