Webpack 基礎學習
Webpack 基礎學習
基本概念：
1. 入口(entry)
webpack將建立所有應用程式的依賴關係圖表(dependency graph)，圖表的起點，稱之為入口起點，（entry point）。入口起點的作用在於：1.webpack從哪裡開始 2.遵循關係依賴圖表要打包什麼。也可以把起點理解為：根上下文或者是app的第一個啟動檔案。
在webpack中 適用 webpack config.js 中的entry屬性定義入口。例如：
Module.exports = {
Entry: ‘./path/to/my/entry/file.js
}
2. 出口(output)
使用webpack將資源歸攏後要指定歸攏後的資源的存放位置，也就是打包路徑，歸攏檔案最終的存放位置。webpack.config.js 中的output屬性定義了檔案的出口。例如：
Module.exports ={
Output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
}
3. 載入器（loader）
Webpack的目標是，讓webpack更關注與專案中的資源，而瀏覽器不許要考慮這些。Webpack把每個資源都做了模組處理，而且webpack只理解javascript。Webpack會把這些檔案轉化成模板，並且講轉化完的檔案新增到依賴圖中。
在高層面webpack的配置有兩個目標。
1. 識別出應該對應的需要loder的那些檔案
2. 講轉化的檔案新增到依賴圖中
Webpackconfig.js
Var Path =require (‘path’);
const config = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{test: /\.(js|jsx)$/, use: 'babel-loader'}
]
}
Moudule.export = config
在這裡對單獨的module設定了rules屬性，裡面也必需包括兩個屬性：test和use.
作用：在require()/import語句解析為‘.js’ 或 ‘.jsx’ 的路徑時，在你把它們新增並打包之前，要先使用 babel-loader 去轉換”。
4. 外掛
Loader只在每一個檔案的基礎上執行轉化，而外掛常用與在打包模組的“compilation”和‘chunk’生命週期執行操作和自定義功能。你可以在一個配置中多次使用外掛用於不同的目的。所以你要使用new建立外掛例項。
Webpack學習
Webpack概述
文件部分翻譯內容來自：https://github.com/webpack-china/webpack.js.org
Webpack 是當下最熱門的前端資源模組化管理和打包工具，他可以價格許多鬆散的資源模組按照依賴和規則打包成為符合生產環境部署的前端資源。還可以按需講載入的模組進行程式碼分割。任何資源都可以視為模組。比如：CommonJs 模組、 AMD 模組、 ES6 模組、CSS、圖片、 JSON、Coffeescript、 LESS 等。
Webpack已經是大部分前端打包工具的首選。Grunt，glup,browserfiy等都會淪為輔助甚至被替代。
webpack處理一些這些情況
1. 載入有問題的依賴項。
2. 意外引入一些不需要在生產環境中適用js css 庫。
3. 意外的映入兩次或者多次庫。
4. 遇到css, js作用域的問題。
5. 需要交付專案時優化資產asset,但是你擔心損壞某些檔案。
入口/起點（entry points）
單個入口編寫方法：
Webpack.config.js
Const config = {
Entry:‘./path/to/my/entry/file.js’
}
Module.export = config;
entry 屬性的單個入口語法，是下面的簡寫：
| const config = { entry: { main: './path/to/my/entry/file.js' } }; 物件語法(const 為es6語法中宣告常量，一旦宣告就不能唄修改) Const config = { Entry: { App: ‘./src/app.js’, Venders : ‘./src/Veors.js’ } } |
| 表面上看，webpack從app.js 和 vendors.js開始建立依賴圖。這些圖表是完全彼此分離。這種方式比較常見與只有一個入口起點的單頁面應用程式。（single page application） |
|
|
多頁面應用程式
Webpack.config.js
Const config = {
Entry:{
Pageone: ‘./src/pagOne.js’,
Pagetwo: ‘./src/ Pagetwo.js’,
Pagetree: ‘./src/ Pagetree.js’,
}
}
這個告訴webpack·需要三個獨立的分離的依賴圖（如上面的例項）
在多頁面中伺服器將為你獲取新的html文件。頁面重新載入文件，並且資源唄重新下載，
’‘ 使用 CommonsChunkPlugin為每個頁面間的應用程式共享程式碼建立 bundle。由於入口起點增多，多頁應用能夠在入口起點重用大量程式碼/模組，這樣可以極大的從這些這些技術受益。’’(不知道什麼意思 )
輸出output
。output 選項控制 webpack 如何向硬碟寫入編譯檔案.（主意可以 存在多個入口起點，但是隻能存在一個輸出配置）
用法：
在 webpack 中配置 output 屬性的最低要求是，將它的值設定為一個物件，包括以下兩點：
1.編譯檔案的檔名(filename)，首選推薦：// main.js || bundle.js || index.js
2.output.path 對應一個絕對路徑，此路徑是你希望一次性打包的目錄
載入器
Loaders
對程式中的資源進行轉化，他們是執行在node服務端的函式，講資原始檔作為引數來源，再返回新的資原始檔。
具體作用：告訴webpack載入css檔案，或者將TypeScript轉化為JavaScript。首先安裝相應的loader，npm install --save-dev css-loader
npm install--save-dev ts-loader
其次配置webpack.config.js,對每個.css檔案使用css-loader.然後類似的對每個ts檔案使用-loader:
module.exports = {
module: {
rules: [
{test: /\.css$/, use:['css-loader'](/loaders/css-loader)},
{test: /\.ts$/, use: ['ts-loader'](https://github.com/TypeStrong/ts-loader)}
]
}
};
配置
通過webpack.config.js
module.rules 允許你在 webpack 配置中指定幾個loader。
這是展示 loader 的一種簡明的方式，並且有助於簡潔程式碼，以及對每個相應的 loader 有一個完整的概述。
|
|
特性
Loader 支援鏈式傳遞。能夠多資源適用流水線。Loader鏈式地按前後順序進行編譯。Loader鏈式中的第一個loader返回值給下一個loader。在最後一個loader，返回webpack所預期的JavaScript.
Loader也可以是非同步或者同步載入。
Loader執行在node.js中。並且能夠執行任何可能的操作。
Loader可以執行引數查詢
Loader也可以使用option物件配置。
指南
安裝
前提：最新版本的node.js
本地安裝：
npm install webpack --save-dev
npm install [email protected]<version>--save-dev