我自己在早期對於webpack知識的稀裏糊塗的使用裏遇到的困惑，我希望能系統化梳理出來，盡最大可能幫助大家解除疑惑。
Pre、幾個預備知識：
1、webpack使用的是cjs（CommonJs）也就是module.exports輸出require()引入；
2、npx是輔助npm的，用處是即使不全局安裝webpack-cli，也能在終端（CMD）中使用:
npx webpack --entry=index.js --output-filename=bundle.js；
3、npm run dev或者npm run build與webpack --entry=index.js --output-filename=bundle.js這命令行輸入的構建語句完全等價，其對應可在package.json的"scripts"字段裏修改
"scripts": {
"build":"webpack --entry=index.js --output-filename=bundle.js",
"dev":"webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
Pre2、webpack的主幹內容：
modules.export={
entry:{
/* 入口文件 */
},
output:{
/* 出口文件 */
},
module:{
/* Loader */
rules:[{},{},{}]
},
plugins:[
/* 插件 */
],
devtool: ...
devServer: {...}
resolve:{...}
}
一、簡單打個包：
這裏用到webpack的核心功能之一：按照依賴（就是這個文件都引入了哪些其他文件）把所有模塊收集起來進行打包。
🚀操練起來：
index.js:
import addContent from './add-content.js';
document.write('My first Webpack app.<br />');
addContent();
add-content.js:
export default function() {
document.write('Hello world!');
}
index.html:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>My first Webpack app.</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
/*output路徑默認是dist，這裏就忽略不寫了*/
filename: 'bundle.js',
},
mode: 'development',
};
關於webpack.config.js： 命令行裏如果只寫webpack，會自動去找到按照webpack.config.js文件打包：
package.json
"scripts": {
"build":"webpack",
},
關於入口：我們想打包所有依賴（關聯）的js文件，得從頭捋，entry填寫的路徑就是這個頭：也就是index.js或者vue裏的main.js
兩個默認：webpack默認的入口是/src文件夾，默認輸出文件夾是/dist文件夾，
直接在命令行裏輸入npm run build，就把文件打包到dis裏了，我們點擊index.html，就可以正常顯示內容了
二、能實時更新修改-devServer：
webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
},
mode: 'development',
devServer: {
publicPath: '/dist',
},
};
package.json:
"scripts": {
"build":"webpack",
"dev":"webpack-dev-server"
},
關於devServer和devServer.publicPath：如果啓用webpack-dev-server，每次打包只會存在於內存中，通過publicPath把內存中的看不見的bundle.js和輸出位置看得見的dist文件夾聯繫起來，這樣即使dist裏是空文件，html也能引入到bundle.js