在学习vue的时候，需要进行打包操作，视频看的是webpack3的踩了好多坑，所以在记录一下，方便后续复习。有错误请指出。
package.json文件
可使用webpack -v查看当前版本号。
接下来进行打包，使用 webpack ./src/main.js -o ./dist/bundle.js --mode development 语句，打包成功。可以看到多了一个dist文件夹，但打包出来的文件是设置的文件名bundle.js
如果有引入jquery，还需要手动安装jquery。npm install jquery -D
测试：在html文件中引入打包的js文件，在本地运行可以看到效果。
注意：这里每修改一次都要重新打包。
新建webpack.config.js文件，进行基本配置。指定完出入口之后，可以直接使用“webpack” 进行打包，但修改后还是需要手动更新。
接下来设置项目热部署，使用webpack-dev-server实现自动打包编译功能
1. 运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
2. 安装完毕后，这个工具的用法和 webpack 命令的用法，完全一样
3. 由于，我们是在项目中，本地安装的 webpack-dev-server ， 所以，无法把它当作 脚本命令，在powershell 终端中直接运行；（只有那些 安装到 全局 -g 的工具，才能在 终端中正常执行）
4. 注意： webpack-dev-server 这个工具，如果想要正常运行，要求，在本地项目中，必须安装 webpack
这里需要在package.json文件的script项里定义"dev":"webpack-dev-server" 代表我执行npm run dev时就执行这句话。执行npm run dev，报错了。。。。
本地安装webpack和webpack-cli。安装完packed.json文件里会显示相关的版本信息。如果本地安装完之后还是不行可以试试全局安装
npm install webpack-dev-server -g
5. webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到实际的物理磁盘上；而是直接托管到了 电脑的内存中，所以我们在项目根目录中，根本找不到这个打包好的bundle.js;
6. webpack-dev-server 把打包好的文件，以一种虚拟的形式托管到了项目的根目录中，虽然我们看不到它，但是可以认为和dist，src，node_modules 平级，有一个看不见的文件，叫做bundle.js
这里遇到一个问题，我已经安装过了webpack，但是还是提示Error: Cannot find module ‘webpack‘。原因可能是webpack没有本地安装，重新安装一下就好了。
执行cnpm install webpack webpack-cli -D，然后npm run dev ，成功！现在可以点击端口号打开项目的页面，但是样式还是没有变。原因是刚开始在index.html里写死了<script src="../dist/bundle.js"></script>。改成这样就可以自动打包编译并且实时刷新浏览器<script src="/bundle.js"></script>
配置 dev-server 命令参数的第二种形式。webpack4.x不进行plugins配置也可以成功
原文：https://www.cnblogs.com/sweetC/p/11480286.html