從 webpack v4.0.0 開始，可以不用引入一個配置文件。然而，webpack 仍然還是高度可配置的。在開始前你需要先理解四個核心概念：

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

一、入口[entry]

入口起點(entry point)指示 webpack 應該使用哪個模塊，來作為構建其內部依賴圖的開始。

進入入口起點后，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。

每個依賴項隨即被處理，最后輸出到稱之為 bundles 的文件中，可以通過在 webpack 配置中配置 entry 屬性，

來指定一個入口起點（或多個入口起點）。默認值為 ./src。

接下來我們看一個 entry 配置的最簡單例子：

webpack.config.js

module.exports = {entry: './path/to/my/entry/file.js' };

二、出口[output]

output 屬性告訴 webpack 在哪里輸出它所創建的 bundles，以及如何命名這些文件，默認值為 ./dist。

基本上，整個應用程序結構，都會被編譯到你指定的輸出路徑的文件夾中。你可以通過在配置中指定一個 output 字段，

來配置這些處理過程：

webpack.config.js

const path = require('path');module.exports = {entry: './path/to/my/entry/file.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'my-first-webpack.bundle.js'} };

三、loader

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

本質上，webpack loader 將所有類型的文件，轉換為應用程序的依賴圖（和最終的 bundle）可以直接引用的模塊。

注意，loader 能夠 import 導入任何類型的模塊（例如 .css 文件），這是 webpack 特有的功能，其他打包程序或任務執行器的可能并不支持。我們認為這種語言擴展是有很必要的，因為這可以使開發人員創建出更準確的依賴關系圖。
在更高層面，在 webpack 的配置中 loader 有兩個目標：

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

webpack.config.js

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。這告訴 webpack 編譯器(compiler) 如下信息：

“嘿，webpack 編譯器，當你碰到「在 require()/import 語句中被解析為 '.txt' 的路徑」時，在你對它打包之前，先使用 raw-loader 轉換一下。”

重要的是要記得，在 webpack 配置中定義 loader 時，要定義在 module.rules 中，而不是 rules。然而，在定義錯誤時 webpack 會給出嚴重的警告。為了使你受益于此，如果沒有按照正確方式去做，webpack 會“給出嚴重的警告”
loader 還有更多我們尚未提到的具體配置屬性。

四、插件[plugins]

?

loader 被用于轉換某些類型的模塊，而插件則可以用于執行范圍更廣的任務。插件的范圍包括，從打包優化和壓縮，一直到重新定義環境中的變量。插件接口功能極其強大，可以用來處理各種各樣的任務。

想要使用一個插件，你只需要 require() 它，然后把它添加到 plugins 數組中。多數插件可以通過選項(option)自定義。你也可以在一個配置文件中因為不同目的而多次使用同一個插件，這時需要通過使用 new 操作符來創建它的一個實例。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝 const webpack = require('webpack'); // 用于訪問內置插件const config = {module: {rules: [{ test: /\.txt$/, use: 'raw-loader' }]},plugins: [new webpack.optimize.UglifyJsPlugin(),new HtmlWebpackPlugin({template: './src/index.html'})] };module.exports = config;

?

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的webpack的四个核心概念的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。