WebPack基本概念

Webpack

Webpack是一個現代JavaScript應用的靜態包的打包器。Webpack有靈活多樣的配置可以滿足你的需求，從version 4開始，可以不用配置文件。

Entry

Entry主要聲明Webpack開始打包的文件，webpack會計算出該文件的直接和間接依賴。

Output

output屬性聲明打包生成文件的存放位置和命名規則。

Loaders

默認webpack只支持js文件，loaders處理其他類型的文件。loaders主要將其他類型文件轉換成你的最終應用可以使用資源。loader的test屬性聲明處理什麼類型的文件，use聲明使用哪個loader。在modules.rules屬性下面。

Plugins

Plugins可以處理更大的任務。plugins數組內，大多數plugin通過option設置它們的具體行為。

Mode

mode應該是development，production，none中的一個。不同的mode值，webpack內部會有不同的代碼優化邏輯。

const path = require(path);const htmlPlugin = require(html-webpack-plugin);module.exports = { mode: production, entry: ./src/index.html, output: { path: path.resolve(__dirname, dist), fileName: first-webpack-bundle.js }, module: { rules: [ { test: /.txt$/, use: raw-loader } ] }, plugins: [ new HtmlPlugin({ template: ./src/index.html }) ]};

推薦閱讀：