webpack基础配置

image.png

当有多个配置文件的时候

image.png
image.png

模式分为开发模式和生产模式

loaders是用来预处理原文件，生成浏览器可以执行的js文件的例如把typescript转化为js文件

• file-loader,把多个小图片转化为dataUrl，转化为base64的文件形式进行存储

  
  image.png

• babel-loader是把文件转化为浏览器可以运行的普通js文件

  
  image.png

• sass-loader文件处理css、less、sass文件

  
  image.png

• MinniCssExtractPlugin把css文件打包到单独的文件当中，

  
  image.png
  image.png
  

  不同的模式下配置不同

• definePlugin

  
  image.png
  image.png

• htmlWebpackPlugin,html运行文件

  
  image.png
  

  会自动转化为HTML文件
  devserver:热替换；

  
  image.png