一、todo页面webpack配置
前言：
前端的价值：
搭建前端工程
网络优化：加快http请求的速度，如何缓存http请求
API定制：和后端进行交流，定接口
Nodejs层：能够使用nodejs写一个脚本，转发，数据处理
快捷键：
打开控制台：control+（esc下方的~）
1、搭建前端工程
npm init：生成package.json包，指定git地址
npm i webpack vue vue-loader：安装webpack、vue、以及解析.vue文件的loader
npm i css-loader vue-template-complier:vue-loader要依赖于这两个loader
安装的依赖中，作用分别为：
- vue-loader：解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理。
- css-loader：加载由 vue-loader 提取出的 CSS 代码。
- style-loader: 将css加载到html中
- vue-template-compiler：把 vue-loader 提取出的 HTML 模版编译成对应的可执行的 JavaScript 代码，这和 React 中的 JSX 语法被编译成 JavaScript 代码类似。预先编译好 HTML 模版相对于在浏览器中再去编译 HTML 模版的好处在于性能更好。
- url-loader: 可以将图片转换为base64代码，直接写在js内容里面，不用生成一个新的文件，对于几kb的图片来说，可以减少http请求 ，url-loader依赖于file-loader，需要同时安装这两个loader
2、webpack主要概念
- 入口文件entry：path为nodejs的一个内置包，写入口文件时，为了不出错，引入path，设置绝对路径
- 出口文件output：设置文件名filename以及文件路径dist
- 配置scripts脚本："build": "webpack --config webpack.config.js"，
- webpack4中将webpack-cli分离出来了，需要单独安装webpack-cli
- 配置loader，webpack只能打包js文件，vue-loader将.vue文件转换为js文件，其他loader同理
3、webpack-dev-server
webpack的一个包
安装:
npm i webpack-dev-server
npm i cross-env
package.json增加scripts脚本“dev”:“webpack-dev-server --config webpack.config.js”
在不同的平台上，设置环境变量的方式不一样，为了兼容不同的平台，可以安装cross-env
mac：
“build”："NODE_ENV=production webpack --config webpack.config.js”;
windows:
"build":"set NODE_ENV=production webpack --config webpack.config.js";
兼容mac和windows：
“build”:"cross-env NODE_ENV=production webpack --config webpack.config.js"
4、config.devtool
webpack官方推荐配置，一方面效率高，一方面准确率高
config.devtool = “cheap-module-eval-source-map”
source-map最完整的进行代码的映射，但是效率低，编译慢
eval可能会出现行对应不齐的问题
帮助我们在页面上调试代码，使用.vue以及es6开发 ，这些代码并不能在浏览器中直接运行，需要经过编译，因此使用sourceMap进行代码的映射 ，可以实现在浏览中进行调试时看到的是自己写的代码
source-map详细解析：https://blog.csdn.net/weixin_42113124/article/details/83089546
二、vue项目
1、安装
npm i postcss-loader autoprefixer babel-loader babel-core
npm i babel-present-env babel-plugin-transform-vue-jsx
在根目录下新建两个文件：
配置文件，一个给babel用，一个postcss用
.babelrc
.postcss.config.js
vue-style-loader和style-loader的不同？
使用.vue进行开发时，使用vue-style-loader可以实现热更替
npm i rimraf -D
先清除上一个dist文件夹，再生成新的dist文件
给自定义模块指定loader
vue-loader.config