webpack5基础配置(vue项目)
本次讲到的是用webpack5基础搭建的vue项目，希望能给刷到文章的有一定的帮助，也希望我们能一起学习努力突破自己,学完之后会对webpack更清晰。
建议先看webpack入门篇，这样对这篇就有更好的掌握
---------- 👇👇👇👇👇👇👇👇👇👇👇 -----------
👉👉👉👉👉 webpack基础入门传送门
一、项目初始化
npm init -y
npm i webpack webpack-cli -D
运行webpack打包项目，看看dist包是否输出，然后index.html引入dist文件夹里的main.js然后打开网页是否正常输出，项目初始化成功!!!
二、webpack分包（common,prod,dev）
1. config文件夹下创建文件
2. 路径合并
3.公共配置
4.开发配置
5.生产配置
6.配置命令
7.验证配置
运行npm run build 刚刚配置的命令，如果发现里面有刚才打印出来的信息，还有再生产里面的mode，说明配置合并成功！
三、引入依赖
1.loader
1.css-loader、style-loader、postcss-loader
npm i css-loader style-loader postcss-loader postcss-preset-env@6 -D
2.创建浏览器版本文件.browserslistrc
3.创建postcss-preset-env 文件集中管理浏览器兼容
4.vue相关依赖
npm i vue -S
npm i vue-loader -D
npm i vue-template-loader -D
2.plugins
1.html-webpack-plugin
npm i html-webpack-plugin -D -- 打包结束后自动生成html文件，并把打包生成的js文件引入这个当中
2.clean-webpack-plugin
npm i clean-webpack-plugin -D 打包之前清空output文件夹里的东西
3.dev-server
npm i webpack-dev-server -D --- 本地开启服务
运行npm run serve 再网页中开启一个本地服务
四、引入常用库
1.vuex
npm i vuex --save
在src目录下创建store文件夹里面创建index.js，并在main.js中引入
2.vue-router
npm i vue-router --save
在src目录下创建router文件夹里面创建index.js，并在main.js中引入,并创建views创建home、about俩个页面，并在app.vue里面开始引入
3.axios
1.json-server
为了模拟真实的数据，所以先本地起个服务，这个插件就是做了这个事情
npm i json-server -D -- 本地起服务的插件
项目根目录创建mock文件并创建db.js
2.二次封装axios
再src文件下创建service文件夹
npm i axios --save
1.创建request.js文件
2.创建index.js文件
3.再src目录下创建api文件，集中存放接口api
4.再webpack.dev.js中添加代理
5.再about.vue中调用此接口
五、配置快捷路径
六、压缩
1. sourcemap
sourcemap 产生的文件映射了压缩后的代码所对应的转换前的源代码位置，解决了代码压缩后难以调试的问题。 具体可参照文档，根据需要配置参数值，不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。
// webpack.dev.js
devtool: 'eval-cheap-module-source-map',
// webpack.prod.js
devtool: 'cheap-module-source-map',
2.js压缩
如果你使用的是 webpack 5 或以上版本，不需要安装这个插件。webpack 5 自带最新的 terser-webpack-plugin，并在mode 为 'production' 时自动使用。
npm i terser-webpack-plugin -D
3.css压缩
npm i css-minimizer-webpack-plugin -D
