一、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