开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第22天，点击查看活动详情
文章概览
- webpack
webpack
在学习vue之前，先来了解一下webpack，webpack是前端项目工程化的具体解决方案，他主要是用来做前端模块化开发的，另外，还可以完成代码压缩混淆、性能优化、浏览器端JavaScript的兼容性等功能。
webpack的使用
创建一个列表隔行变色项目
- 新建空白目录，使用npm init -y命令来初始化包管理配置文件package.json。
- 创建src源代码目录。
- 在src目录下创建index.html作为首页，并在当前目录下创建index.js脚本文件。
- 初始化页面的基本结构。
- 使用npm install jquery -5 命令，安装jQuery。
- 通过ES6模块化的方式导入jQuery，实现列表隔行变色的效果。
在使用npm命令安装webpack时常常要用到两个命令，save和save-dev，为了简化操作，使用-S代表--save，使用-D作为--save-dev的简写。
mode可选值
mode有两个可选值：development和production，前者代表开发环境，不会对打包生成的文件进行代码压缩和性能优化，但是打包速度快，这种方法比较适合在开发时应用。后者production作为生产环境，会对打包生成的文件进行代码压缩和性能优化，虽然打包速度慢，但比较适合在项目的发布阶段应用。
webpack.config.js文件的使用
webpack.config.js作为webpack的配置文件，在打包构建项目之前，编译器会首先读取到这个配置文件，从而基于给定的配置对项目进行打包。由于webpack是基于node.js开发出来的打包工具，所以在其配置文件中支持node.js相关的语法和模块会有webpack个性化设置。
