webpack 入门教程详细教程

webpack

中文网：https://www.webpackjs.com/

一、webpack是什么？ 4.x

webpack是一个现代javascript应用程序的静态模块打包器（module bundler）。

实际它的定义时有个模块打包工具，将前端开放中的不同的模块打包到一起，在页面引入时减少模块的加载，以模块化的形式关联个文件间的关系，所以我们可以看到在很多的脚手架工具中使用webpack打包后的项目最终只引入了一个js文件，就将所有的关联的模块文件都给引入了。

webpack简单的说一个模块打包器。

二、为什么要使用webpack？webpack能解决什么问题？

现在很多的网页都可以看做是功能丰富的应用，他们拥有着复杂的javascript代码和一大推依赖包。为了解决这个问题，前端社区涌现出了很多好的实践方法。

a:模块化 requirejs 我们可以把复杂的程序细化为小的文件。

b:scss,less等css预处理器

c:.vue文件

d: ES6语法

以上这些浏览器都不能直接识别，都需要经过额外的处理之后才能让浏览器识别，而我们手动去繁琐，webpack就可以帮我们解决这些问题。

三、webpack和grunt及gulp相比有什么特性？

grunt 和 gulp是一种能够优化前端开发流程的工具。

grunt 和 gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩的具体步骤，这个工具可以帮你自动完成这些任务。

webpack 是一种模块化的解决方案。

webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js）,webpack将从这个文件开始找到你的项目的所有依赖文件，使用loader处理它们，最后打包为一个浏览器可识别的javascript文件。

1、 打包 (依赖关系，把多个文件打包成一个文件，减少请求，服务器的压力)

2、 转化 (比如：sass 、vue) 需要使用loader

3、 优化 (SPA（单页Web应用）越来越流行，webpack可以对你的项目进行优化)

四、webpack可以很好的实现如下目标：

1> 将依赖树拆分成按需加载的模块

2> 初始化加载时耗时尽量少

3> 各种静态资源都可以视作模块（css,js,模块，…）

4> 将第三方库整合成模块的能力,可以自己配置

5> 适合大型项目，无论是单页面还是多页面

五、使用webpack

1、webpack安装

webpack基于nodejs，必须要保证你的电脑安装过nodejs

本地安装webpack  --->   推荐

npm install  webpack  --save-dev   

webpack 4.x版本需要安装webpack-cli

npm install webpack-cli --save-dev

全局安装webpack   --->   不推荐

npm install webpack -g
 

六、基于commonjs的模块实现

既然webpack可以让我们使用模块化的方式编写代码。

第一步：构建一个项目目录，如下：

第二步：定义模块，如下：

第三步：在app.js中引入模块，如下：

第四步：在index.html中引入app.js，如下：

在浏览器中查看：

第五步：执行webpack app.js -o bundle.js

webpack 入口文件路径 -o 出口文件路径

npx webpack ./src/app.js -o ./dist/dist.js

在index.html中引bundle.js

在浏览器中查看：