webpack是開發(fā)工具，面試考點重點在配置和使用，原理理解不需要太深。

我們提供的服務有：成都網(wǎng)站建設、做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、都勻ssl等。為上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的都勻網(wǎng)站制作公司

一、基本配置

1、拆分配置和merge

將公共配置跟dev和prod的配置拆分，然后通過webpack-merge對配置進行整合。

2、啟動本地服務

dev環(huán)境啟動devserver配置。

3、處理ES6

使用babel-loader，針對對應目錄的js進行代碼轉換。

4、處理樣式

使用postcss-loader、css-loader、style-loader等，這里有個考點是loader的執(zhí)行順序是從后往前執(zhí)行。

5、處理圖片

在dev環(huán)境直接使用file-loader進行圖片的直接引用，prod環(huán)境會使用url-loader對小圖片進行base64編碼。

6、模塊化

webpack天生支持模塊化。

二、高級配置

1、配置多入口

entry設置多入口文件，在output輸出文件使用[name]根據(jù)entry的key動態(tài)生成輸出文件名

plugins要設置多個HtmlWebpackPlugin，根據(jù)多入口生成多個html文件，同時要設置chunks，來引入相應入口文件，如果不設置則會把全部入口文件都引入 。

2、每次打包清除dist原有文件

在plugins使用new CleanWebpackPlugin()，會默認清空 output.path 指定的文件夾內(nèi)容。

3、抽離css文件

mini-css-extract-plugin使用這個插件的loder來替換style-loader。

在plugins里面配置mini-css-extract-plugin的filename，用于設置存放抽離的css具體目錄和名字。

使用webpack的optimization的minimizer加入 terser-webpack-plugin 和 optimize-css-assets-webpack 插件來壓縮抽離的css。

4、抽離公共代碼

使用webpack的optimization的splitChunks

optimization:{
  splitChunks:{
    chunks:'all',
// 緩存分組
    cacheGroups:{
//第三方模塊
      vendor:{
        name:'vendor', // chunk 名稱
        priority:1, // 權限最高，優(yōu)先抽離，重要！！
        test:/node_modules/, // 匹配目錄規(guī)則
        minSize:0, // 大小限制
        minChunks:1, // 最少復用過幾次
      }
//公共模塊
      common:{
        name:'common', // chunk 名稱
        priority:0, // 優(yōu)先級
        minSize:0, // 公共模塊的大小限制
        minChunks:2, // 公共模塊最少復用過幾次
      }
    }
  }    
}