我自己在早期对于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