entry (入口配置)

1. string ---> '.src/index.js'

• 單入口
• 打包形成一個(gè)chunk疼鸟，輸出一個(gè)bundle文件菩混。
• 此時(shí)chunk的名稱默認(rèn)是main

2. array ---> ['./src/index.js' , './src/add.js']

• 多入口
• 打包形成一個(gè)chunk来颤，輸出一個(gè)bundle文件杨名。
• ---> 只有在HMR功能中讓html熱更新生效

3. object ---> {indx:'./src/index.js' , add:'./src/add.js'}

• 多入口
• 有幾個(gè)入口文件就會(huì)形成幾個(gè)chunk雁刷，輸出多個(gè)bundle文件呕诉。
• 此時(shí)chunk的名稱是key

output（出口配置）

1. filename:文件名稱(目錄 + 名稱)
2. path:輸出的目錄(將來所有的文件輸出的目錄)
3. publicPath:'/' (所有資源引入公共路徑的前綴) img/1.png ---> /img/1.png
4. chunkFilename:'js/[name]_chunk.js' (非入口chunk的名稱)
5. library: '[name]' (整個(gè)庫向外暴露的變量名)
6. libraryTarget:'window' (變量名添加的目標(biāo))

module (模塊缘厢，loader的配置)

module:{
  rules:[
    {
      test:/\.css$/,
      // 多個(gè)loader的配置
      use:['style-loader','css-loader']
    },
    {
       test:/\.js$/,
      // 單個(gè)loader
       loader:'eslint-loader',
      // 排除node_modules下的文件
       exclude:/node_modules/,
      // 只檢查src下面的文件
       include:__dirname + '/src',
      // 優(yōu)先執(zhí)行 和 延后執(zhí)行
       enforce:'pre',
       enforce:'post'
      // loader的配置
       options:{}
    },
    {
    // 以下loader只會(huì)生效一個(gè)
      oneOf:[]
    }
  ]
}

resolve （路徑配置）

resolve:{
    // 配置路徑別名 : 優(yōu)點(diǎn)：簡寫路徑 缺點(diǎn)：沒有代碼提示
    alias : {
      $css : __dirname + '/src/css'
    },
    // 配置省略后綴名的規(guī)則,也就是說在引入文件時(shí)可以省略后綴名。
    extensions:['.js','.json']甩挫，
    // 配置webpack解析模塊時(shí)所需目錄
    modules:[__dirname + '/node_modules','node_modules']
}

devServer (開發(fā)服務(wù)器)

devServer:{
 // 告訴服務(wù)器從哪個(gè)目錄中提供內(nèi)容, 一般是打包后的目錄贴硫。
  contentBase: __dirname + '/build',
  // 告知 dev-server，serve(服務(wù)) [`devServer.contentBase`]選項(xiàng)下的文件伊者。開啟此選項(xiàng)后英遭，在文件修改之后，會(huì)觸發(fā)一次完整的頁面重載亦渗。
  watchContentBase: true,
  watchOptions:{
    // 忽略監(jiān)視node_modules
    ignored:/node_modules/
  },  
  // 啟用 gzip 壓縮
  compress:true,
  // 端口號：5000
  port : 5000
  // 域名
  host:'localhost',
  // 自動(dòng)打開瀏覽器
  open:true,
  // 開啟HMR功能
  hot:true,
  //  不要顯示啟動(dòng)服務(wù)器日志信息
  clientLogLevel:'none',
  // 除了一些基本啟動(dòng)信息外挖诸，其他都不要顯示
  quiet:true,
  // 如果出現(xiàn)錯(cuò)誤不要全屏提示
  overlay:false,
  // proxy  ---> 服務(wù)器代理(解決跨域問題)
  proxy:{
    // 一旦devServer(5000)接收到 /api/xxx請求，就會(huì)把請求轉(zhuǎn)發(fā)到另一個(gè)服務(wù)器(3000)
    '/api':{
        target:'http://lcoalhost:3000'
     },
    // 發(fā)送請求時(shí)法精，請求路徑重寫: /api/xxx ---> /xxx
    pathRewrite:{
      ‘^api’:'' 
    }
  }
}

optimization (代碼分割 code split) ---> mode:'production生產(chǎn)環(huán)境'

// code split 代碼分割
optimization:{
  // 分割方案 (參考文檔)
  splitChunks:{},
  // 將當(dāng)前模塊的記錄其他模塊的hash單獨(dú)打包為一個(gè)文件 runtime
  // 解決：修改a文件導(dǎo)致b文件的contenthash變化
   runtimeChunk:{
    name:entrypoint => `runtime-${entrypoint.name}`    
   },
   minimizer:{
    // 配置生產(chǎn)環(huán)境的壓縮方案: js 和 css
    new TerserWebpackPlugin({
      // 開啟緩存
      cache:true,
      // 是否啟用多進(jìn)程打包
      parallel:true,
      // 啟動(dòng)sourcemap
      sourceMap:true
    })  
  }
}