1. webpack(模块打包机)简介、安装、基础配置
webpack 简介
官网地址:
webpack中文网
webpack官网
什么是 webpack
webpack 是基于整个项目进行构建的,前端的一个项目自动化构建工具,它是基于 Node.js 开发出来的一个前端工具。可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
打包的好处:
- 将许多碎小文件打包成一个整体,减少单页面内的衍生请求次数,提高网站效率。
- 将ES6的高级语法进行转换编译,以兼容老版本的浏览器。【ts=>js、scss=>css、...】
- 将代码打包的同时进行混淆,提高代码的安全性。
- 自动刷新:监听本地源代码的变化。自动重新构建刷新浏览器
- 压缩js,css,html代码,压缩合并图片等
- 提取多个页面的公关代码,提取首屏不需要的执行部分的代码让其异步加载
- ...
npm 安装过的文件都会出现在 package.json 文件:
{
"name": "webpack-study", // 项目名称,**必须有**,少于214字,不可以以.和_开头,应是URL安全的字符。
"version": "1.0.0", // 项目版本,**必须有**,应满足[major, minor, patch]【重大,次要,补丁】的格式。
"description": "", // 项目的描述信息
"main": "index.js", // 指定了程序的主入口文件
"scripts": { // 通过`npm run [key值]`,可执行对应的行为。
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server --open --port 3000 --contentBase dist --hot",
"start": "webpack-dev-server"
},
"keywords": [], // 项目的一些关键字。有助于用户通过关键字搜索到你的项目
"author": "", // 项目拥有者的相关信息
"license": "ISC", // 指明你的项目许可证,让用户知道以何种权限使用你的项目
"bugs": "", // 当用户发现了你的bugs时,可以在这里找到你并反馈给你
"files": "", // 表明项目下的哪些文件是重要的。效果类似于.gitignore文件,区别是前者包含性,后者排除性。
"repository": "", // 指明你的项目仓库地点。这有助于其他人能够帮助你一起维护项目,最常见的就是GitHub仓库啦:
"dependencies": { // 运行时依赖(生产和开发都会用到的依赖),使用npm --save(-S)命令安装会出现在这里,会随项目打包。
"npm": "^6.9.0",
"vue": "^2.6.10",
"vue-router": "^3.0.3"
},
"devDependencies": { // 开发时依赖,一般是开发的工具,使用npm --dev(-D)命令安装会出现在这里,不随项目一起打包。
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"less": "^3.12.2",
"less-loader": "^7.1.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.6.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}