一小时上手webpack（基础使用指南含demo）

一、什么是webpack

官方定义：

webpack is a module bundler lets you write any module format(mixed also), compiles then for the browser. And it supports static async bundling.

简单的说webpack是一个构建工具，什么是构建工具呢，我们在开发环境的代码，是为了方便阅读与开发，生产环境的代码则是为了代码更好的运行。开发环境的代码，要进行压缩编译以后，才能放在线上执行，这样代码体积更小，加载起来更快，所以构建工具一般有以下几种作用：

1、代码压缩

将JS、CSS代码混淆压缩，让代码体积更小，加载更快

2、编译语法

编写CSS时使用Less、Sass，编写JS时使用ES6、TypeScript等，这些标准目前都无法被浏览器兼容，因此需要构建工具编译，例如使用Babel编译ES6语法。

3、处理模块化：

CSS和JS的模块化语法，目前都无法被浏览器兼容。因此开发环境可以使用既定的模块化语法，但是需要构建工具将模块化语法编译为浏览器可识别形式。例如使用web