ES6+ 和 图片 在项目中的使用
ES6+的转码
如果想使用ES6+
语法,那可以使用 babel-loader
和 babel-preset-env
。
如果想进一步了解关于 babel
的信息,请看这两篇文章。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader' // 可以在这里进行关于babel的配置项,不过通常建议新建一个.babelrc文件进行配置
}
]
}
}
.bablerc
{
"presets": [
["env", {
"modules": false, // 关闭babel的模块化,使用webpack的模块化,方便我们使用tree-shaking,Scope Hositing等特性
"targets": {
"browsers": [">1%", "last 2 versions", "not ie <= 8"]
}
}]
]
}
需要注意的是,这里仅仅是对 ES6+
的语法进行转码,并没有对API进行转码,即:promise
arrow function
可以被转码,但 Array.find
等。 (这里其实并不是针对所有这些API,而是静态方法,看这里)
那我们还需要对这些API进行转码,所以可以使用 babel-polyfill
在项目中直接引用即可。
图片的使用
因为 webpack
无法识别图片文件,所以我们需要一个针对于处理图片文件的 loader
。
对于这个场景,我们需要使用 file-loader
。 (之前说过 css-loader
会处理 url
的哦~)
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/,
use: 'file-loader'
}
]
}
但我们会发现,在 vue-cli
中它对于一些小图片会进行 base64
处理,这样就减少了一次请求。对于这种小图片我们之前的策略是使用 雪碧图
,但现在很少采用这种方案了,一是不容易维护,二是导致合成的图会很大,影响初始加载。
base64
是一堆字符串在HTML中,现在通常采用这个方案。当然如果对于小图标你使用了 svg
就更好。
所以这里我们需要使用 url-loader
,这个包拓展了 file-loader
,可以配置一个 limit
,使得图片小于这个值的时候进行 base64
编码。
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'url-loader',
options: {
limit: 10000 // 单位是byte
}
}
]
}
雪碧图的配置就不贴了,使用的是 webpack-spritesmith
就ok,会生成 css/less/stylus/scss
等代码。
另外一个需求就是图片的压缩了。 vue-cli
并没有配置图片压缩。可以借助 image-webpack-loader
来对图片进行压缩。
{
test: /\.(png|svg|jpe?g|gif)$/,
use: [{
loader: 'file-loader',
options: {}
}, {
loader: 'image-webpack-loader',
options: {
mozjpeg: { // 压缩 jpeg 的配置
progressive: true,
quality: 65
},
optipng: { // 使用 imagemin-optipng 压缩 png,enable: false 为关闭
enabled: false,
},
pngquant: { // 使用 imagemin-pngquant 压缩 png
quality: '65-90',
speed: 4
},
gifsicle: { // 压缩 gif 的配置
interlaced: false,
},
webp: { // 开启 webp,会把 jpg 和 png 图片压缩为 webp 格式
quality: 75
}
}
}
也可以使用 url-loader
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000
}
}, {
loader: 'image-webpack-loader',
options: {
mozjpeg: { // 压缩 jpeg 的配置
progressive: true,
quality: 65
},
optipng: { // 使用 imagemin-optipng 压缩 png,enable: false 为关闭
enabled: false,
},
pngquant: { // 使用 imagemin-pngquant 压缩 png
quality: '65-90',
speed: 4
},
gifsicle: { // 压缩 gif 的配置
interlaced: false,
},
webp: { // 开启 webp,会把 jpg 和 png 图片压缩为 webp 格式
quality: 75
}
},
}]
}
这个配置是先压缩再进行 url-loader
处理的。