webpack

webpack

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle。

四個核心概念：

• 入口(entry)
• 輸出(output)
• loader
• 插件(plugins)

入口(entry)：

入口起點(entry point)指示 webpack 應該使用哪個模塊，來作爲構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。
單個入口（簡寫）語法:

}
	entry: string|Array<string>
}

多入口對象語法:

{
	entry: {[entryChunkName: string]: string|Array<string>}
}

輸出(output)：

output 屬性告訴 webpack 在哪裏輸出它所創建的 bundles，以及如何命名這些文件，默認值爲 ./dist。基本上，整個應用程序結構，都會被編譯到你指定的輸出路徑的文件夾中。
用法：

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;

多個入口起點:

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

output的常用屬性：filename、path
其他可參照文檔：https://www.webpackjs.com/configuration/output/

loader：

loader 讓 webpack 能夠去處理那些非 JavaScript 文件 （webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉換爲 webpack 能夠處理的有效模塊，然後你就可以利用 webpack 的打包能力，對它們進行處理。

在更高層面，在 webpack 的配置中 loader 有兩個目標：

• test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些文件。
• use 屬性，表示進行轉換時，應該使用哪個 loader。

例子：

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

** 以上配置中，對一個單獨的 module 對象定義了 rules 屬性，裏面包含兩個必須屬性：test 和 use。**
loader列表：https://www.webpackjs.com/loaders/
常用的loader：

• babel-loader
• css-loader
• style-loader
• url-loader
• file-loader
• sass-loader
• less-loader
• html-loader

插件(plugins)：

loader 被用於轉換某些類型的模塊，而插件則可以用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮，一直到重新定義環境中的變量。插件接口功能極其強大，可以用來處理各種各樣的任務。
想要使用一個插件，你只需要 require() 它，然後把它添加到 plugins 數組中。多數插件可以通過選項(option)自定義。你也可以在一個配置文件中因爲不同目的而多次使用同一個插件，這時需要通過使用 new 操作符來創建它的一個實例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝
const webpack = require('webpack'); // 用於訪問內置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

插件列表：https://www.webpackjs.com/plugins/
常用的是：模塊熱替換插件，其他可根據項目按需接入

以上只是官網的一些概要，想深入瞭解webpack可查看官網文檔：https://www.webpackjs.com/ ，建議自己編寫一個loader和plugin，能更好的去理解webpack！