標籤：cti create rate 磁碟 上下 export one targe home
深入學習webpack（二）在深入學習webpack（一）中，我通過一個例子介紹了webpack的基本使用方法，下面將更為系統的學習webpack的基本概念，對於一門技術的掌握我認為系統化還是很重要的，如果僅僅是一知半解，更為深入的地方瞭解不夠，那麼你就泯然眾人矣。
webpack的核心概念主要有四個： entry（入口）、output（出口）、loaders（載入器）、plugins（外掛程式）。 下面我將逐一介紹。
Entry
webpack會建立應用裡所有依賴的圖表，而最開始的圖表就是所謂的入口檔案。 入口檔案會告訴webpack從何處開始並且根據依賴清楚如何打包。所以入口檔案就是承接內容相關的根檔案或者說是你的app第一個使用的檔案。
在webpack中我們在 webpack.config.js 中的entry選項裡定義入口檔案，最簡單的定義方式如下：
module.exports = { entry: ‘./path/to/my/entry/file.js‘};
這個非常容易理解，不再贅述。下面進行更為詳細的介紹。
單一入口配置webpack.config.js內容如下：
const config = { entry: ‘./path/to/my/entry/file.js‘};module.exports = config;
這和之前的配置是一樣的，只是我們把匯出的這個對象賦給了config對象之後才匯出的。
說明： 這個文法是雖簡單的文法，它是下面文法的簡寫形式。
const config = { entry: { main: ‘./path/to/my/entry/file.js‘ }};
What happens when you pass an array to
entry? Passing an array of file paths to theentryproperty creates what is known as a "multi-main entry". This is useful when you would like to inject multiple dependent files together and graph their dependencies into one "chunk".
當你希望快速建立一個單入口應用的webpack配置時，這是一個非常棒的選擇。 然而，這個文法並沒有太多的可擴充性。
注意：這裡的main是可以替換的，並且換成任意的名稱都是可以編譯成功的，但是對於多入口檔案，這裡的名稱就對應於html的名稱了，比如兩個頁面，a.html和b.html，那麼在entry中的兩個鍵就是a和b了。
對象文法配置
webpack.config.js如下：
const config = { entry: { app: ‘./src/app.js‘, vendors: ‘./src/vendors.js‘ }};
對象文法可能顯得冗雜一些，但是對於定義的入口檔案和出口檔案這是最具擴充性的方式。
"Scalable webpack configurations" are ones that can be reused and combined with other partial configurations. This is a popular technique used to separate concerns by environment, build target and runtime. They are then merged using specialized tools like webpack-merge.
Scenarios
下面的入口檔案的使用是它們在生產環境中使用的例子：
獨立的App和Vender入口webpack.config.js如下所示：
const config = { entry: { app: ‘./src/app.js‘, vendors: ‘./src/vendors.js‘ }};
從表面來看，它告訴webpack從app.js和verdors.js兩者同時開始（作為入口檔案）， 這些圖表是完全獨立的， 在單頁面應用中這是非常常見的（除了verdors）。
多頁面應用
const config = { entry: { pageOne: ‘./src/pageOne/index.js‘, pageTwo: ‘./src/pageTwo/index.js‘, pageThree: ‘./src/pageThree/index.js‘ }};
與單頁面不同，對於多頁面顯然就有多個入口檔案，這樣配置的目的就是如此，即告訴webpack我們需要三個獨立的依賴圖表。
Output
即使你需要打包所有的檔案到一個檔案中你還是需要告訴webpack最終要打包到哪裡，而這裡的output屬性就是告訴webpack如何處理打包檔案的。
const path = require(‘path‘);module.exports = { entry: ‘./path/to/my/entry/file.js‘, output: { path: path.resolve(__dirname, ‘dist‘), filename: ‘my-first-webpack.bundle.js‘ }};
同樣注意：這裡的path時node的內建模組。
另外，出口檔案的路徑必須是絕對路徑而不能是相對路徑。
即我們使用了output.filename和output.path屬性來將所有檔案最終打包到path和filename對應的檔案中去，這樣，在html中，我們就可以應用這些檔案了。
在entry中我們知道入口可以是多個，但是出口檔案的配置確實指定的。
下面介紹一些常用的選項，即下面的屬性是可以定義在output對象中的。
output.chunkFilename不常用
output.crossOriginLoding與跨域相關。
output.devtoolLineToLine不常用。
output.filename即指定出口檔案的檔案名稱，注意： 這裡不能使用絕對路徑，因為output.path選項決定了檔案在磁碟上的位置，而filename僅僅是用來命名檔案的。
（1）單入口
{ entry: ‘./src/app.js‘, output: { filename: ‘bundle.js‘, path: __dirname + ‘/build‘ }}// writes to disk: ./build/bundle.js
即對於單入口的檔案，最終只會打包出一個檔案。
（2） 多入口
當頁面是多入口時，你應該使用替換法來確保每一個出口檔案都有一個獨一無二的名字。
其中[name]將會被打包出的檔案名稱所代替。
[hash]將會被compilation（編譯）所代替。
[chunkhash]將會被chunk的hash代替。舉例如下所示：
{ entry: { app: ‘./src/app.js‘, search: ‘./src/search.js‘ }, output: { filename: ‘[name].js‘, path: __dirname + ‘/build‘ }}// writes to disk: ./build/app.js, ./build/search.js
注意： 這裡的app和search對應的頁面是app.html和search.html兩個。
output.hotUpdateChunkFilename
不常用
output.hotUpdateFilename
不常用
output.hotUpdateMainFilename
不常用
output.jsonpFunction
不常用
output.library
不常用
output.libraryTarget
不常用
output.path
這必須是一個絕對路徑。如下，config.js：
output: { path: "/home/proj/public/assets", publicPath: "/assets/"}
index.html:
<head> <link href="/assets/spinner.gif"/></head>
更加複雜的例子是使用CDN。那麼config如下：
output: { path: "/home/proj/cdn/assets/[hash]", publicPath: "http://cdn.example.com/assets/[hash]/"}
output.sourceMapFilename
不常用
努力的人，運氣永遠都不會太差！
深入學習webpack（二）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
