今天来说说,webpack中文件的处理,先来看一个简单的demo。
//base.css
body {
background: url('../assets/img/2017yj.jpg')
}
//app.js
import './style/base.css'
webpack.config.js
const path = require('path')
module.exports = {
entry: {
app: path.join(__dirname, 'src/app.js')
},
output: {
filename: '[name].bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
{loader: 'style-loader'},
{loader: 'css-loader'}
]
}
]
}
}
我们之前讲过style-loader,跟css-loader一个是处理css一个是把css插入到html中。
但是在我们进行打包的是时候,会报一个错误,这是因为图片属于资源文件,我们需要额外的loader来处理。
所以,我们需要借助file-loader来处理图片资源。
在rules下面加一条规则
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
然后我们再重新打包一下。
打包成功,但是页面上依然没有图片,我们可以打开开发工具看一下,这张图片的地址,发现图片的地址不对,应该是从dist下面取,所以我们在output中加一个publicPath
output: {
filename: '[name].bundle.js',
publicPath: 'dist/',
path: path.join(__dirname, 'dist')
},
再重新打包,图片就出来。
有些时候,我们可能需要把一些小图片打包成base64位,那么我们就可以使用url-loader
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1000
}
}
]
如果limit不设置,则默认打包成base64位
再优化一点,我们可以使用img-loader将图片的大小进行压缩。
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1000
}
},
{
loader: 'img-loader',
options: {
plugins: [
require('imagemin-mozjpeg')({
progressive: true,
arithmetic: false
}),
]
}
}
]
再打包一下,图片就由原来的125kb变成了80kb
此外还有一些小图标,我们希望可以合成雪碧图或者是字体图标,这样可以减少网络请求,使用也方便。
我们可以使用一个插件webpack-spritesmith
new SpritesmithPlugin({
src: {
// 需要合成雪碧图的目录,以及图片格式
cwd: path.resolve(__dirname, 'src/assets/img'),
glob: '*.png'
},
target: {
// 成功雪碧图的目录,以及字体样式
image: path.resolve(__dirname, 'src/assets/img/sprite.png'),
css: [
path.resolve(__dirname, 'src/assets/font/sprite.styl'),
]
},
apiOptions: {
cssImageRef: "~sprite.png"
}
})
而且在npm上,css配置可以用函数来处理,也就是说我们根据自己的需求来生成文件,比如h5有时候需要2倍的图标。
华丽的分割线,下面说说第三方依赖的处理
比如我现在要在项目中用jquery,要怎么处理呢?
第一种方式,就是直接用cdn在项目中引入,这种方式当然是可以的,但项目中一般不这么干。
第二种方式就是通过插件来处理,(ProvidePlugin)这个插件是webpack自带的,所以不需要额外安装包,只需要引入webpack就行。
new webpack.ProvidePlugin({
$: 'jquery'
})
配置也很简单,给ProvidePlugin传一个key-value的对象。
//app.js
import './style/base.css'
setTimeout(()=> {
$('#app').html('this is jquery')
},2000)
其他不变,我们打包试一下。
app.bundle.js的文件大小变成了80KB,我们再来看一下结果。(2秒之后,内容变成了this is query)
之前jquery是通过npm安装的,但是如果jquery文件在本地怎么办呢?
我们可以配置一个路径映射来解决。
npm uninstall jquery -D
我们先把jquery卸载掉,然后下载一个jquery.min.js放在本地。
在配置文件中加一个映射
resolve: {
alias: {
jquery: path.join(__dirname, 'src/common/jquery.min.js')
}
},
重新打包,也是正常的。
网友评论