轉載:http://webpack.wuhaolin.cn/2%E9%85%8D%E7%BD%AE/2-8%E6%95%B4%E4%BD%93%E9%85%8D%E7%BD%AE%E7%BB%93%E6%9E%84.html
記錄下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
},
}複製程式碼
webpack打包優化:https://juejin.im/post/5bd801f8518825290945806e