entry

• 單入口：entry是一個(gè)字符串

  entry: './src/index.js'
  

• 多入口：entry是一個(gè)對象

  entry: {
    index: './src/index.js',
    search: './src/search.js'
  }
  

output

output是用來告訴webpack如何將編譯后的文件輸出到磁盤

• output 單入口配置

  output: {
      filename: 'bundle.js',
      path: path.join(__dirname, 'dist')
  }
  

• output 多入口配置

  output: {
    filename: '[name].js', // 通過占位符確保文件名稱的唯一
    path: path.join(__dirname, 'dist')
  }
  

核心概念之Loaders

webpack開箱即用只支持JS和JSON兩種文件類型，通過Loaders去支持其它文件類型并且把它們轉(zhuǎn)化成有效的模塊，并且可以添加到依賴圖中。
Loaders本身是一個(gè)函數(shù)，接受源文件作為參數(shù)，返回轉(zhuǎn)換結(jié)果。

常用的Loaders有哪些？

常用Loaders

Loaders的用法

module.exports = {
    module: {
        rules: [
            {test: /\.txt$/, use: 'raw-loader'} // test指定匹配規(guī)則，use指定使用的loader名稱
        ]
    }
};

核心概念之Plugins

插件用于bundle文件的優(yōu)化，資源管理和環(huán)境變量注入
作用于整個(gè)構(gòu)建過程

常見的Plugins有哪些？

常用plugins

Plugins的用法

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]
};

核心概念之Mode

這是在webpack4提出的一個(gè)概念，Mode 用來指定當(dāng)前的構(gòu)建環(huán)境是：production、development還是none。
設(shè)置mode可以使用webpack內(nèi)置的函數(shù)，默認(rèn)值為production。

Mode的內(nèi)置函數(shù)功能

Mode的內(nèi)置函數(shù)