轉-webpack學習筆記--總體配置結構

前端學習一段時間後，尤爲是工做2-3年的小夥伴們在面試中都會懼怕被問到webpack,我也懼怕，每次都是臨時抱佛腳，雖然本身會簡單的配置webpack可是對webpack的原理仍是隻知其一;不知其二，無心中看到這篇文章寫的還不錯，因此轉發過來，也方便本身學習和記錄。

const path = require('path');
module.exports = {
// entry 表示 入口，Webpack 執行構建的第一步將從 Entry 開始，可抽象成輸入。
// 類型能夠是 string | object | array 
entry: './app/entry', // 只有1個入口，入口只有1個文件
entry: ['./app/entry1', './app/entry2'], // 只有1個入口，入口有2個文件
entry: { // 有2個入口
a: './app/entry-a',
b: ['./app/entry-b1', './app/entry-b2']
},

// 如何輸出結果：在 Webpack 通過一系列處理後，如何輸出最終想要的代碼。
output: {
// 輸出文件存放的目錄，必須是 string 類型的絕對路徑。
path: path.resolve(__dirname, 'dist'),

// 輸出文件的名稱
filename: 'bundle.js', // 完整的名稱
filename: '[name].js', // 當配置了多個 entry 時，經過名稱模版爲不一樣的 entry 生成不一樣的文件名稱
filename: '[chunkhash].js', // 根據文件內容 hash 值生成文件名稱，用於瀏覽器長時間緩存文件

// 發佈到線上的全部資源的 URL 前綴，string 類型
publicPath: '/assets/', // 放到指定目錄下
publicPath: '', // 放到根目錄下
publicPath: 'https://cdn.example.com/', // 放到 CDN 上去

// 導出庫的名稱，string 類型
// 不填它時，默認輸出格式是匿名的當即執行函數
library: 'MyLibrary',

// 導出庫的類型，枚舉類型，默認是 var
// 能夠是 umd | umd2 | commonjs2 | commonjs | amd | this | var | assign | window | global | jsonp ，
libraryTarget: 'umd',

// 是否包含有用的文件路徑信息到生成的代碼裏去，boolean 類型
pathinfo: true,

// 附加 Chunk 的文件名稱
chunkFilename: '[id].js',
chunkFilename: '[chunkhash].js',

// JSONP 異步加載資源時的回調函數名稱，須要和服務端搭配使用
jsonpFunction: 'myWebpackJsonp',

// 生成的 Source Map 文件名稱
sourceMapFilename: '[file].map',

// 瀏覽器開發者工具裏顯示的源碼模塊名稱
devtoolModuleFilenameTemplate: 'webpack:///[resource-path]',

// 異步加載跨域的資源時使用的方式
crossOriginLoading: 'use-credentials',
crossOriginLoading: 'anonymous',
crossOriginLoading: false,
},

// 配置模塊相關
module: {
rules: [ // 配置 Loader
{ 
test: /\.jsx?$/, // 正則匹配命中要使用 Loader 的文件
include: [ // 只會命中這裏面的文件
path.resolve(__dirname, 'app')
],
exclude: [ // 忽略這裏面的文件
path.resolve(__dirname, 'app/demo-files')
],
use: [ // 使用那些 Loader，有前後次序，從後往前執行
'style-loader', // 直接使用 Loader 的名稱
{
loader: 'css-loader', 
options: { // 給 html-loader 傳一些參數
}
}
]
},
],
noParse: [ // 不用解析和處理的模塊
/special-library\.js$/ // 用正則匹配
],
},

// 配置插件
plugins: [
],

// 配置尋找模塊的規則
resolve: { 
modules: [ // 尋找模塊的根目錄，array 類型，默認以 node_modules 爲根目錄
'node_modules',
path.resolve(__dirname, 'app')
],
extensions: ['.js', '.json', '.jsx', '.css'], // 模塊的後綴名
alias: { // 模塊別名配置，用於映射模塊
// 把 'module' 映射 'new-module'，一樣的 'module/path/file' 也會被映射成 'new-module/path/file'
'module': 'new-module',
// 使用結尾符號 $ 後，把 'only-module' 映射成 'new-module'，
// 可是不像上面的，'module/path/file' 不會被映射成 'new-module/path/file'
'only-module$': 'new-module', 
},
alias: [ // alias 還支持使用數組來更詳細的配置
{
name: 'module', // 老的模塊
alias: 'new-module', // 新的模塊
// 是不是隻映射模塊，若是是 true 只有 'module' 會被映射，若是是 false 'module/inner/path' 也會被映射
onlyModule: true, 
}
],
symlinks: true, // 是否跟隨文件軟連接去搜尋模塊的路徑
descriptionFiles: ['package.json'], // 模塊的描述文件
mainFields: ['main'], // 模塊的描述文件裏的描述入口的文件的字段名稱
enforceExtension: false, // 是否強制導入語句必需要寫明文件後綴
},

// 輸出文件性能檢查配置
performance: { 
hints: 'warning', // 有性能問題時輸出警告
hints: 'error', // 有性能問題時輸出錯誤
hints: false, // 關閉性能檢查
maxAssetSize: 200000, // 最大文件大小 (單位 bytes)
maxEntrypointSize: 400000, // 最大入口文件大小 (單位 bytes)
assetFilter: function(assetFilename) { // 過濾要檢查的文件
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
},

devtool: 'source-map', // 配置 source-map 類型
context: __dirname, // Webpack 使用的根目錄，string 類型必須是絕對路徑

// 配置輸出代碼的運行環境
target: 'web', // 瀏覽器，默認
target: 'webworker', // WebWorker
target: 'node', // Node.js，使用 `require` 語句加載 Chunk 代碼
target: 'async-node', // Node.js，異步加載 Chunk 代碼
target: 'node-webkit', // nw.js
target: 'electron-main', // electron, 主線程
target: 'electron-renderer', // electron, 渲染線程

externals: { // 使用來自 JavaScript 運行環境提供的全局變量
jquery: 'jQuery'
},

stats: { // 控制檯輸出日誌控制
assets: true,
colors: true,
errors: true,
errorDetails: true,
hash: true,
},

devServer: { // DevServer 相關的配置
proxy: { // 代理到後端服務接口
'/api': 'http://localhost:3000'
},
contentBase: path.join(__dirname, 'public'), // 配置 DevServer HTTP 服務器的文件根目錄
compress: true, // 是否開啓 gzip 壓縮
historyApiFallback: true, // 是否開發 HTML5 History API 網頁
hot: true, // 是否開啓模塊熱替換功能
https: false, // 是否開啓 HTTPS 模式
},

profile: true, // 是否捕捉 Webpack 構建的性能信息，用於分析什麼緣由致使構建性能不佳
cache: false, // 是否啓用緩存提高構建速度

watch: true, // 是否開始
watchOptions: { // 監聽模式選項
// 不監聽的文件或文件夾，支持正則匹配。默認爲空
ignored: /node_modules/,
// 監聽到變化發生後會等300ms再去執行動做，防止文件更新太快致使從新編譯頻率過高
// 默認爲300ms 
aggregateTimeout: 300,
// 判斷文件是否發生變化是不停的去詢問系統指定文件有沒有變化，默認每秒問 1000 次
poll: 1000
},
}