webpack入門認知
webpack 是什麼?
本質上, webpack 是一個現代 JavaScript 應用程式的 靜態模組打包器(module bundler) 。當 webpack 處理應用程式時,它會遞迴地構建一個 依賴關係圖(dependency graph) ,其中包含應用程式需要的每個模組,然後將所有這些模組打包成一個或多個 bundle 。
主要概念,及作用,及使用方式?
主要概念:entry,output,loader,plugins
entry(輸入):
entry: {[entryChunkName: string]: string|Array <string>}
指示 webpack 應該使用哪個模組,來作為構建其內部 依賴圖 的開始。進入入口起點後,webpack 會找出有哪些模組和庫是入口起點(直接和間接)依賴的。
const config = { entry: { pageOne: './src/pageOne/index.js', pageTwo: './src/pageTwo/index.js', pageThree: './src/pageThree/index.js' } };
在entry中可以配置多個入口(多頁面應用),使用CommonsChunkPlugin可以為每個頁面間的應用程式共享程式碼建立bundle,多頁應用能夠複用入口起點之間的大量程式碼/模組。
output(輸出):
配置
output
選項可以控制 webpack 如何向硬碟寫入編譯檔案。注意,即使可以存在多個
入口
起點,但只指定一個
輸出
配置。
output的屬性是一個包含filename,path 的物件
-
filename
:輸出檔案的檔名 -
path
:目標輸出目錄的絕對路徑
用多個入口起點或使用像 CommonsChunkPlugin 這樣的外掛),則應該使用 佔位符(substitutions) 來確保每個檔案具有唯一的名稱
{ entry: { app: './src/app.js', search: './src/search.js' }, output: { filename: '[name].js', // 確保每個檔案具有唯一的名稱 path: __dirname + '/dist' } }
loader
loader 用於對模組的原始碼進行轉換,更加靈活地引入細粒度邏輯,例如壓縮、打包、語言翻譯。。。
三種使用方式:
module.exports = { module: { rules: [ { test: /\.css$/, use: 'css-loader' }, { test: /\.ts$/, use: 'ts-loader' } ] } };
plugins(外掛):
外掛目的在於解決
loader
無法實現的
其他事
,webpack
外掛
是一個具有
apply
屬性的 JavaScript 物件。
外掛
可以攜帶引數/選項,你必須在 webpack 配置中,向
plugins
屬性傳入
new
例項
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通過 npm 安裝 plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ]