webpack核心概念

標籤：ref   使用   java   地方   檔案   html   功能   get   目標   

一、webpack四個核心概念1、入口【Entry】

webpack將建立所有應用程式 依賴關係圖表。圖表的起點被稱之為 入口起點。入口起點告訴webpack從哪裡開始，並遵循著依賴關係圖表知道打包什麼。可以將您的應用入口起點認為是跟上下文或app的第一個開機檔案。

const config = {  entry: {    app: ‘./src/app.js‘  }}module.exports = config;

2、出口【Output】

將所有資源打包在一起，仍然告訴webpack在哪裡打包我們的應用，即將打包資源輸出到什麼地方。

const config = {  entry: {    app: ‘./src/app.js‘  },  output: {    filename: ‘webpack.bundle.js‘,    path: ‘./dist‘  }}module.exports = config;

3、載入器【Loader】

webpack的目標是，讓項目中的所有資源都成為webpack的關注點，而瀏覽器不需要考慮這些（這並不意味著資源都必須打包在一起）。webpack把每個檔案（.css, .html, .scss, .jpg, .etc）都作為模組處理。然而webpack只瞭解JavaScript，所有需要載入器來處理其它類型的檔案。
因為檔案已被添加到了依賴圖表，所有webpack載入器會將這些檔案轉換為模組。
loader屬性要實現的兩個目標：
（1）識別出應該被特定的載入器轉換的檔案；
（2）轉換能夠被添加到依賴圖表的檔案（並且最終打包）

const config = {  entry: {    app: ‘./src/app.js‘  },  output: {    filename: ‘webpack.bundle.js‘,    path: ‘./dist‘  },  module: {    loaders: [      {        test: /\.(js|jsx)$/,        loader: ‘babel-loader‘      },      {        test: /\.css$/,        loaders: [‘style‘, ‘css‘]      }    ]  }}module.exports = config;

loader的兩個必選屬性test和loader告訴了webpack如下行為：webpack編譯器，當你碰到在require()/import語句中被解析為.js或.jsx的路徑時，在你把它們添加並打包之前，要先使用babel-loader去轉換。同理，css也是這個樣子，只不過使用的loader模組不同。

4、外掛程式【Plugins]

載入器僅基於單個檔案執行轉換，外掛程式最常用於（但不限於）在打包模組的“編譯”和“組塊”時執行操作和自訂功能。webpack的外掛程式系統極其強大和可定製。
為了使用外掛程式，需要require它們，並且把它們添加到plugins數組。多數外掛程式可以通過potion來自訂。由於你可以在一個配置多次使用外掛程式用於不同的目的，因此你需要使用new來建立外掛程式的執行個體，並且調用外掛程式。

const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);const htmlWP = new HtmlWebpackPlugin({template: ‘./src/index.html‘});const config = {  entry: {    app: ‘./src/app.js‘  },  output: {    filename: ‘webpack.bundle.js‘,    path: ‘./dist‘  },  module: {    loaders: [      {        test: /\.(js|jsx)$/,        loader: ‘babel-loader‘      },      {        test: /\.css$/,        loaders: [‘style‘, ‘css‘]      }    ]  },  plugins: [    htmlWP  ]}module.exports = config;

二、webpack解析三種檔案路徑

（1）絕對路徑
（2）相對路徑
（3）模組路徑

webpack核心概念