entry: 入口起點
1. string --> './src/index.js'
單入口打包形成乙個chunk。 輸出乙個bundle檔案。
此時chunk的名稱預設是 main
2. array --> ['./src/index.js', './src/add.js']
多入口所有入口檔案最終只會形成乙個chunk, 輸出出去只有乙個bundle檔案。
--> 只有在hmr功能中讓html熱更新生效~
3. object
多入口有幾個入口檔案就形成幾個chunk，輸出幾個bundle檔案
此時chunk的名稱是 key
--> 特殊用法
const
=require
('path');
const htmlwebpackplugin =
require
('html-webpack-plugin');
module.exports =
, output:
, plugins:
[new
htmlwebpackplugin()
],mode:
'development'
};
const
=require
('path');
const htmlwebpackplugin =
require
('html-webpack-plugin');
module.exports =
, plugins:
[new
htmlwebpackplugin()
],mode:
'development'
};
const
=require
('path');
const htmlwebpackplugin =
require
('html-webpack-plugin');
module.exports =
, module:,}
,]},
plugins:
[new
htmlwebpackplugin()
],mode:
'development'
};
const
=require
('path');
const htmlwebpackplugin =
require
('html-webpack-plugin');
module.exports =
, module:]}
, plugins:
[new
htmlwebpackplugin()
],mode:
'development'
,// 解析模組的規則
resolve:
,// 配置省略檔案路徑的字尾名
extensions:
['.js'
,'.json'
,'.jsx'
,'.css'],
// 告訴 webpack 解析模組是去找哪個目錄
modules:
[resolve
(__dirname,
'../../node_modules'),
'node_modules']}
}
const
=require
('path');
const htmlwebpackplugin =
require
('html-webpack-plugin');
module.exports =
, module:]}
, plugins:
[new
htmlwebpackplugin()
],mode:
'development'
, resolve:
, extensions:
['.js'
,'.json'
,'.jsx'
,'.css'],
modules:
[resolve
(__dirname,
'../../node_modules'),
'node_modules']}
, devserver:
,// 啟動gzip壓縮
compress:
true
,// 埠號
port:
5000
,// 網域名稱
host:
'localhost'
,// 自動開啟瀏覽器
open:
true
,// 開啟hmr功能
hot:
true
,// 不要顯示啟動伺服器日誌資訊
clientloglevel:
'none'
,// 除了一些基本啟動資訊以外，其他內容都不要顯示
quiet:
true
,// 如果出錯了，不要全屏提示~
overlay:
false
,// 伺服器** --> 解決開發環境跨域問題
proxy:}}
}};
const
=require
('path');
const htmlwebpackplugin =
require
('html-webpack-plugin');
const terserwebpackplugin =
require
('terser-webpack-plugin'
)module.exports =
, module:]}
, plugins:
[new
htmlwebpackplugin()
],mode:
'production'
, resolve:
, extensions:
['.js'
,'.json'
,'.jsx'
,'.css'],
modules:
[resolve
(__dirname,
'../../node_modules'),
'node_modules']}
, optimization:
, default:
}*/},
// 將當前模組的記錄其他模組的hash單獨打包為乙個檔案 runtime
// 解決：修改a檔案導致b檔案的contenthash變化
runtimechunk:
` }
, minimizer:
[// 配置生產環境的壓縮方案：js和css
newterserwebpackplugin()
]}};
webpack學習筆記（四）
當前優化 配置本地開發環境 引入webpack dev server 區分開發環境和生產環境 tips node sass可能出現安裝不成功的情況，請使用cnpm並且刪除依賴重試 npm install npm run build 路徑.webpack.dev.config.js const pat...
webpack入門記錄
webpack介紹 1.四大核心概念，入口 出口 外掛程式 loaders 載入器 2.webpack模組化原理 3.分割配置檔案 4.優化打包 3.在當前目錄下面建立src的資源目錄 4.在src下面建立index.js 作為需要打包的檔案 5.建立webpack的配置檔案 有兩種方式 a 直接在...
WebPack安裝記錄
首先得有node.js環境 1.安裝webpack npm install webpack 3.6.0 g 報錯 rollbackfailedoptional verb npm session cb71c3d2baeba676 檢視node版本 node v 原因 npm沒有設定國內映象伺服器 解決...