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

最新推荐文章于 2025-08-18 13:20:12 发布

原创最新推荐文章于 2025-08-18 13:20:12 发布 · 734 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#webpack #es6 #javascript

本文介绍了如何在webpack中处理ES6语法，通过babel-loader将ES6转换为ES5。接着讨论了CSS、Less/Sass的处理方法，并针对图片处理，区分了开发与生产环境的不同策略。在开发环境中，图片会被输出到img文件夹，并进行大小配置。在HTML、JS和CSS中使用图片分别需要html-withimg-loader、file-loader或url-loader。

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

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

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

{
  "presets": ["babel-preset-env"],
  "plugins": []
}

然后在webpack.common.js

module:{
 rules:[
   {
    test:/\.js$/,
    loader:['babel-loader'],
    include:srcPath,
    exclude:/node_modules/
   }
 ]
}

二.处理样式
对于css文件

npm i css-loader -D
npm i style-loader -D

module:{
 rules:[
  {
   test:/\.css$/,
   loader:['style-loader','css-loader']//执行顺序为从后到前
  }
 ]
}

对于less或者sass

npm i less -D
npm i less-loader -D

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

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

module:{
 rules:[
  {
    test:/\.html$/
    use:'html-withimg-loader'
  }
 ]
}

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

npm i file-loader -D

module:{
 rules:[{
   test:/\.(jpg|png|gif)$/,
   use:'file-loader'
 }]
}

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

npm i url-loader -D

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