webpack3-出入口以及服務配置

1、入口檔案配置——entry選項

  入口起點訓示webpack應該使用那個子產品，來作為建構其内部依賴圖的開始。進入入口起點後，webpack會找到哪些子產品和庫是入口起點（直接和間接）依賴的。

文法：

entry: string|Array<string>
或：
entry: {
    [entryChunkName: string]: string| Array<string>
}
           

例如：

1、entry: "./src/entry.js"
2、entry: ['./src/entry.js', './src/entry2.js']
3、entry: {
    entry: './src/entry.js'
}
4、entry: {
    entry: './src/entry.js', // 對象屬性名随意命名
    entry2: './src/entry2.js'
}
           

上述代碼中，1、3為單入口寫法，2、4為多入口寫法。

2、出口檔案配置——output選項

  出口屬性告訴webpack在哪裡輸出它所建立的檔案，以及如何命名這些檔案。

文法：

output:{
    filename：string,
    path: string
}
           

在webpack中配置output屬性是一個對象，其必須包含 filename、path兩個屬性。

• filename：用于輸出檔案的檔案名
• path：目标輸出目錄的絕對路徑

例如：

output: {
    filename: 'bundle.js',
    path: "/home/webpacktest/dist"
}
           

path也可以使用node的path對象來處理路徑，在webpack.config.js的頭部引入path，代碼如下：

const path = require('path');

output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
}
           

path.resolve(__dirname, 'dist')

會擷取到項目的絕對路徑。

多入口、多出口：

entry: {
    entry: './src/entry.js',
    entry2: './src/entry2.js'
},
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
}
           

[name]

的意思是根據入口檔案的名稱，打包成相同的名稱，有幾個入口檔案，就可以打包出幾個檔案。

3、服務配置——devServer選項

  webpack-dev-server是webpack官方提供的一個小型的express伺服器。使用它可以為webpack打包生成的資源檔案提供web服務，以及自動重新整理和熱替換。

  要執行webpack-dev-server需要先安裝，使用

npm install webpack-dev-server --save-dev

安裝webpack-dev-server。安裝完進行配置，最簡單的devServer隻需要四項：

devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    host: 'localhost,
    compress: true,
    port: 3000
}
           

• contentBase: 配置伺服器基本運作路徑。告訴伺服器從哪裡提供内容。隻有你想要提供靜态檔案時才需要。
• host: 服務運作位址，建議使用本機IP，預設為localhost，如果你希望伺服器外部可通路指定為

  0.0.0.0

  。
• compress：伺服器端壓縮選項，一般設定為開啟。
• port：伺服器運作端口。

具體devServer配置參見：https://doc.webpack-china.org/configuration/dev-server/#devserver-publicpath-