webpack常用配置（四）之ES6，图片，样式

98 阅读 0 评论 65 点赞

我是靠谱客的博主糊涂鱼，这篇文章主要介绍webpack常用配置（四）之ES6，图片，样式，现在分享给大家，希望可以做个参考。

webpack里面的源文件都是一个module，需要经过webpack的解析与编译。
一.处理ES6
首先看一下ES6，对于现代浏览器而言，有一些ES6的语法是无法被解析的，因此需要babel将ES6解析为ES5
因此需要先安装babel-loader

复制代码

1
2
3
4
npm i babel-loader -D //我这里是^7.1.5版本的
npm i babel-core -D//babel-core包含了一些babel里面的api
npm i babel-preset-env -D //提供执行环境

安装完以后需要在根目录新建.babelrc文件

复制代码

1
2
3
4
5
{
  "presets": ["babel-preset-env"],
  "plugins": []
}

然后在webpack.common.js

复制代码

1
2
3
4
5
6
7
8
9
10
11
module:{
 rules:[
   {
    test:/.js$/,
    loader:['babel-loader'],
    include:srcPath,
    exclude:/node_modules/
   }
 ]
}

二.处理样式
对于css文件

复制代码

1
2
3
npm i css-loader -D
npm i style-loader -D

复制代码

1
2
3
4
5
6
7
8
9
module:{
 rules:[
  {
   test:/.css$/,
   loader:['style-loader','css-loader']//执行顺序为从后到前
  }
 ]
}

对于less或者sass

复制代码

1
2
3
npm i less -D
npm i less-loader -D

复制代码

1
2
3
4
5
6
7
8
9
module:{
 rules:[
  {
  test:/.less/,
  loader:['style-loader','css-loader','less-loader']
  }
 ]
}

三：处理图片
对于图片的处理一般分为dev环境下的处理，和prod下的处理，和上述放在common里面的略有不同，主要的原因是在开发环境下，图片一般是在根路径下，打包以后希望把他们全部输出到一个img文件夹里面，而且需要对图片的大小做一些精细化的配置处理

其次对于图片的使用有这三种：
1.在html中的src标签中使用
2.在js中import使用
3.在css中使用，比如背景图片
对于第一种，需要安装html-withimg-loader

复制代码

1
2
npm i html-withimg-loader -D //^0.1.16

复制代码

1
2
3
4
5
6
7
8
9
module:{
 rules:[
  {
    test:/.html$/
    use:'html-withimg-loader'
  }
 ]
}

对于第二种和第三种情况：安装file-loader

复制代码

1
2
npm i file-loader -D

复制代码

1
2
3
4
5
6
7
module:{
 rules:[{
   test:/.(jpg|png|gif)$/,
   use:'file-loader'
 }]
}

webpack.prod.js,在这个文件里对图片做一些精细化配置，需要安装url-loader

复制代码

1
2
npm i url-loader -D

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
module:{
 rules:[{
  test:/.(png|jpg|gif)$/,
  use:{
   loader:'url-loader',
   options:{
      limit:1024*5,//小于5kb的图片会被输出为base64格式
      outputPath:"/img/" //全部输出到img文件夹里面
    }
   }
 }]
}