webpack-基礎 貌似這些屬於編譯原理的內容。 當時看了一點編譯原理，當中的自動機，徹底懵。 不過大概瞭解了一點內容。感覺webpack一個打包工具非常類似於一個編譯器，將一個檔案，轉換為另外一個檔案。

一些概念

入口

入口，即尋找入口檔案的及其依賴項的檔案。即編譯前的檔案 配置檔案為webpack.config.js中修改為 module.exports = { entry: "./app.js" } 使用這個可以設定入口檔案為./app.js由該檔案，可以尋找相關的依賴

出口

output告訴要生成那些檔案 ``` const path = require("path");

module.exports = { entry: "./app.js", output: { filename: "my-first-webpack.js" } } ``` 匯出該檔案

loader

loader可以讓webpack處理非js檔案。 module: { rules: [ {test: /\.txt$/, use: 'raw-loader'} // 再遇到txt檔案的時候，需要使用ras-loader進行轉換一下 ] } 遇到txt檔案的時候，需要使用raw-loader進行轉換

類似於express中的中介軟體

raw-loader表示將檔案作為字串進行讀取

外掛

即打包，優化，定義環境中的變數等。 plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ]

入口檔案

``` const config = { entry: './file.js', // 定義入口檔案 }

module.exports = config; 分離應用程式和第三方庫 const config = { entry: { app: './src/app.js', vendors: './src/vendors.js' } }

module.exports = config; ``` 在上方中webpack會根據app和vendors分別建立兩個互相沒有任何依賴的依賴圖，進行打包 在平常中，一個html文件，只使用一個入口檔案。

出口

如何寫出編譯後的檔案。 ``` const config = { entry: { app: './src/app.js', vendors: './src/vendors.js' }, output: { filename: 'bundle.js', // 檔名稱 path: '/home/assets' // 輸出後的絕對路徑 } }

module.exports = config; ```

``` const config = { entry: { app: './src/app.js', vendors: './src/vendors.js' }, output: { filename: '[name].js', // 檔名稱,name為物件名，輸出的檔案為app.js vendors.js path: '/home/assets' // 輸出後的絕對路徑 } }

module.exports = config; ```

出口，即編譯完成後生成的檔案

load

load為程式碼轉換，可以使用這個載入css檔案，使用這個將typeScript轉為JavaScript 安裝 npm install --save-dev ts-loader ``` const config = { entry: { app: './app.js' }, output: { filename: '[name].js', // 檔名稱,name為物件名，輸出的檔案為app.js vendors.js path: '/home/assets' // 輸出後的絕對路徑 }, module: { rules: [ {test: /.ts$/, use: 'ts-loader'} ] } }

module.exports = config; ``` 使用這個可以在打包的時候，將ts檔案轉為js檔案。

外掛

建立同名的js檔案 這裡的是apply()函式。 ``` const pluginName = "ConsoleLogOnBuildWebpackPlugin"

class ConsoleLogOnBuildWebpackPlugin { apply(){ console.log('構建開始'); } } 使用外掛 const webpack = require('webpack'); // 訪問內建外掛

const config = { entry: { app: './app.js' }, output: { filename: '[name].js', // 檔名稱,name為物件名，輸出的檔案為app.js vendors.js path: '/home/assets' // 輸出後的絕對路徑 }, module: { rules: [ {test: /.ts$/, use: 'ts-loader'} ] }, plugins: [ new webpack.optimize.UgifyJsPlugin(), new ConsoleLogOnBuildWebpackPlugin() ] }

module.exports = config; ```