webpack入门（快速实例）一

前言：

webpack入门系列主要参考了姜瑞涛的教程，内容深入浅出，作为入门教学，对webpack系统化学习十分有帮助，感兴趣的小伙伴可以去看一看姜瑞涛的官网。这里的文章主要是结合自己的操作，与可能面临的问题做的个人总结。

前两篇文章已经分享了如何安装node环境与配置，以及利用vue-cli3来初步构建我们的项目，但vue-cli3内部高度集成了webpack，所以没有暴露webpack的配置文件，但项目上一般我们依然需要创建vue.config.js去修改默认的webpack，因此下面我们来系统学习一下。

webpack简介

Webpack是一个模块打包工具(module bundler)，因为平常多用来对前端工程打包，所以也是一个前端构建工具。其最主要的功能就是模块打包，官方对这个打包过程的描述不太容易理解。

模块打包，通俗地说就是：找出模块之间的依赖关系，按照一定的规则把这些模块组织合并为一个JavaScript文件。

Webpack认为，JS文件、CSS文件、jpg/png图片等等都是模块。Webpack会把所有的这些模块都合并为一个JS文件，这是它最本质的工作。当然，我们可能并不想要它把这些合并成一个JS文件，这个时候我们可以通过一些规则或工具来改变它。

Webpack 快速入门

为了方便理解，我们来配置一个最简单的Webpack工程，来快速体验一下Webpack整个打包流程

一.Webpack的安装与命令行打包

webpack是依赖node.js来执行，因此在安装webpack之前，我们需要一个node环境，还不会安装的小伙伴可以看一下前面的文章node与npm安装及配置，这里不再赘述。

node全局环境准备好后，我们在本地新建一个文件夹webpack1-1，在该文件夹下执行命令行