使用 Webpack 实现 Vue 项目打包流程

安装

1.Webpack的基础安装：npm i webpack webpack-cli vue vue-cli webpack-dev-server --save-dev
2.常用的loader：[babel-loader, @babel/core, @babel/preset-env, @babel/polyfill, style-loader, css-loader, less-loader, vue-loader, vue-template-compiler, eslint-loader]
3.常用的plugin：[html-webpack-plugin, clean-webpack-plugin, copy-webpack-plugin]

配置

1. 在webpack.common.js文件中按照需求写入模式 、入口、输出、依赖和插件。
2. 将js文件、vue文件、less和图片文件等等模块，分别使用不同的loader进行处理。
3. 然后写上webpack-dev-server配置，先定义一下端口号。在配置以npx 启动webpack打包和webpack-dev-server。
4. 按报错的提示分别加上对应的plugin处理，这里要注意index.html有BASE_URL，需要通过DefinePlugin来注入 JSON.stringify(’./public/’)路径
   如果两个命令都没有问题，就可以通过merge来进行分模块编写配置文件了，分别对应webpack.dev.js和webpack.prod.js。
5. 把命令写进npmscript中，开启source-map，在不同配置文件里选择不同模式
   用webpack-dev-server的属性hotOnly开启HMR同时避免错误后刷新
6. 开启dev环境的tree-shaking
7. 将eslint命令写进npmScript里
   大功告成，恭喜你，到这里你的项目就成功了！