webpack的一些經常使用配置 （轉）

webpack 的配置文件就是 Node 的一個模塊，它導出的將是一個對象

module.exports = {
 entry: './entry',
 output: {
 path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } } 

若是直接使用 webpack 來執行編譯，webpack 默認讀取的是當前目錄下的 webpack.config.js 文件

若是你有其餘命名的配置文件，能夠使用 –config 參數傳入路徑

webpack --config ./webpackConfig/dev.config.js

配置入口：entry

入口能夠是單入口（字符串），也能夠是多入口（數組/對象），爲了方便後續維護，最好寫成對象

module.exports = {
 // pagesDir 是前面準備好的入口文件集合目錄的路徑
 entry: {
 'alert/index': path.resolve(pagesDir, `./alert/index/page`), 'index/login': path.resolve(pagesDir, `./index/login/page`), 'index/index': path.resolve(pagesDir, `./index/index/page`), } } 

entry 屬性的 name 對應具體的目錄

├─src # 當前項目的源碼
 ├─pages # 各個頁面獨有的部分，如入口文件、只有該頁面使用到的css、模板文件等 │ ├─alert # 業務模塊 │ │ └─index # 具體頁面 │ ├─index # 業務模塊 │ │ ├─index # 具體頁面 │ │ └─login # 具體頁面 

輸出文件：output

output 參數與 entry 不一樣：output 參數告訴 webpack 以什麼樣的方式來 生成/輸出 文件。output 參數至關於一套規則，全部的入口都必須使用這一套規則。

module.exports = {
 output: {
 path: path.resolve(__dirname, 'build'),
 filename: '[name]/entry.js', publicPath: 'build', chunkFilename: '[id].bundle.js' } } 

path

path 參數表示生成文件的根目錄，須要傳入一個絕對路徑， path 參數和後面的 filename 參數共同組成了輸出文件的路徑

filename

filename 屬性表示的是如何命名生成出來的入口文件，規則有如下三種：

• [name] ：入口文件的 name
• [hash] ：本次編譯的一個 hash 版本，只要在同一次編譯過程當中生成的文件，這個 hash 的值就是同樣的
• [chunkhash] ： chunk 的一個 hash 版本，在同一次編譯中，每個 chunk 的 hash 都是不同的，在兩次編譯中，若是某個 chunk 根本沒發生變化，那麼該 chunk 的 hash 就不會發生變化

publicPath

publicPath 參數表示的是一個 URL 路徑，用於生成 css/js/image/fonts 等資源的路徑，以確保網頁能正確地加載到這些資源。

chunkFilename

chunkFilename 與 filename 參數相似，都是用來定義文件的命名方式，只不過chunkFilename 參數指定的是除入口文件外的 chunk 的命名。

Loader配置：module

webpack 的核心實際上只能對 js 進行打包，webpack 能夠經過 loader 將那些不是 js 的文件轉換成 js，再進行打包。

module.exports = {
 loaders: [
 {
 test: /\.jsx$/, include: [ path.resolve(__dirname, 'app/src'), path.resolve(__dirname, 'app/test') ], exclude: [ path.resolve(__dirname, 'node_modules') ], loader: 'babel-loader' } ] }