webpack基礎（二）核心配置

entry —— 可字元串，可對象，可數組

打包入口 （spa【單頁面應用 / 單入口】， mpa【多頁面應用 / 利于seo】）

output

占位符： [name], —— 名字

[hash] —— 類似時間戳，利于緩存 [hash:6]的形式限制位數 （内容發生變化，hash就變化）

[chunkhash]

例：

const path = require('path')
module.exports = {
  // 入口
      entry: { // 多入口
    index: './src/index.js',
    other: './src/a.js'
  },
  // 模式
  mode: 'development',
  // 出口
  output: {
    // 輸出資源的存放位置 必須絕對路徑
    path: path.resolve(__dirname, './build'),
    filename: '[name].js'  // 占位符 [name] 對應上面的index和other
    // filename: '[name]-[hash:6].js'  // 占位符 [name] 對應上面的index和other
  },
}
           

mode —— none，development，production（預設）三種模式

開發階段的開啟會有利于熱更新的處理，識别哪個子產品變化

⽣産階段的開啟會有幫助子產品壓縮，處理副作⽤等⼀些功能

loader —— （子產品轉換器、子產品處理器）對檔案加載轉換處理，預設僅支援 .js .json子產品，其他子產品需要引入插件，如将scss轉化為css等

例：安裝css-loader（對引入css進行處理）,style-loader（把 CSS 插入到 DOM 中）

npm install --save-dev css-loader
npm install --save-dev style-loader
           

webpack.config.js配置

// 多個loader的執行順序，先執行後面的loader（css-loader），再執行前面的（style-loader）module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
           

plugin —— 插件(webpack的功能拓展)；基于事件機制工作，會監聽webpack打包過程中的某些節點，執行廣泛的任務

例：安裝

npm install html-webpack-plugin -D // 自動生成html文檔
npm install clear-webpack-plugin -D   // 删除冗雜檔案
           

配置

const htmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin') 
module.exports = {
    ...
    plugins: [
        new htmlWebpackPlugin({
            template: "./src/index.html", // 生成html的模闆
            filename: "kp.html" // 生成html的檔案名
          }),
          new CleanWebpackPlugin ()
      ]
}
           

概念問題：

問：chunk，bundle，module的差別？

答：

chunk

代碼片段（webpack轉化後的代碼片段）

module

子產品

bundle

輸出的資源檔案就叫 bundle檔案

一個chunks可以對應一個或多個子產品

一個bundle對應一個chunks